做了个图片轮播,但是滚动速度越来越快,求解。而且变快以后鼠标悬停后不暂停


window.addEventListener('load',function(){
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    var fw = focus.offsetWidth;
    focus.addEventListener('mouseenter',function(){
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer);
        timer = null;//清除定时器变量
    })
    
    focus.addEventListener('mouseleave',function(){
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        var timer = setInterval(function(){
            //手动调用带点击事件
           arrow_r.click(); 
        },3000);
    })

    //动态生成小圆圈
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.cirbox');
    // console.log(ul.children.length);
    for (var i = 0;i < ul.children.length;i++){
        //创建一个li
        var li = document.createElement('li');
        //记录当前小圆点的索引号,通过自定义属性来做
        li.setAttribute('index',i);
        ol.appendChild(li);
        //选中谁书就变色
        li.addEventListener('click',function(){
            for(var i = 0;i < ol.children.length;i++){
                ol.children[i].className = '';
            }
            this.className = 'active'
            var index = this.getAttribute('index');
            num = index;
            circle = index;
            //点击小圆圈移动图片

            animate(ul,-index * fw,);
        })
    }
    // 克隆第一张到后面
    ol.children[0].className = 'active';
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    //点击右侧按钮,图片滚动
    var num = 0;
    var circle = 0;
    arrow_r.addEventListener('click',function(){
        if(num == ul.children.length-1){
            ul.style.left = 0;
            num = 0;
        }
        num++;
        animate(ul,-num*fw);
        circle++;
        if(circle == ol.children.length){
            circle = 0;
        }
        for(var i = 0;i < ol.children.length;i++){
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'active';
    })
    arrow_l.addEventListener('click',function(){
        
        if(num == 0){
            num = ul.children.length-1;
            ul.style.left = -num*fw+'px';
        }
        num--;
        animate(ul,-num*fw);
        circle--;
        if(circle < 0){
            circle = ol.children.length-1;
        }
        for(var i = 0;i < ol.children.length;i++){
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'active';
    })
    //定时器
    var timer = setInterval(function(){
        //手动调用带点击事件
       arrow_r.click(); 
    },3000);
})

做个节流就好了

速度越来越快,证明你又启动多一个定时器,同时执行