轮播图离开页面后出现轮播bug

Question

我的轮播图出了点问题。
如果我在当前页面不离开，轮播图是正常播放的，但是我一旦离开页面不看，它就会一直往左播，不停下来，直到图片什么的都看不到了还在播。
有时候我一看，left已经是-10000px多了。非要我在打开那个我暂时缩小没看的页面之后它才会回复正常，有时候又不会恢复正常
怎么解决这个问题？

 var timer;
            var num=[];
            var index=0;
            var arr = document.getElementsByClassName("pin");
            var imglist = document.getElementById("imglist");
            var list = document.getElementsByTagName("li");
            if(list.length>5){
                imglist.style.width = 2500 + (list.length-5)*500 + "px";
            }

            for(var i = 0;i<arr.length;i++){
                arr[i].num = i;
                arr[i].onclick=function(){
                    clearInterval(timer);
                    index = this.num;
                   
                    move(imglist,"left",-index*500,10,function(){
                        autoChange();
                    });
                    arr[index].style.backgroundColor="black";
                    setA();

                }
            }
                autoChange();
                setA();
        
        function autoChange(){
            timer = setInterval(function(){
                index++;
                move(imglist,"left",-index*500,10,function(){
                    setA();
                
                }
                )
            },3500);     
        }
         
        

        function move(obj,attr,target,speed,callback){
        clearInterval(obj.timer)
        var current = parseInt(getComputedStyle(obj,null)[attr])
        if(current > target){
            speed = -speed
        }
        obj.timer = setInterval(function(){
        var oldvalue = parseInt(getComputedStyle(obj,null)[attr]);
        var newvalue = oldvalue +speed;
        if((speed < 0 && newvalue < target) || (speed > 0 && newvalue > target)){
                newvalue = target;
        }
        obj.style[attr] = newvalue + "px";
        if(newvalue == target){
        clearInterval(obj.timer);
            callback();
        }
        },10)
        }

            function setA(){
                if(index >=arr.length){
                    index=0;
                    imglist.style.left = 0;
                    }
                for(var i = 0;i<arr.length;i++){
                    arr[i].style.backgroundColor="";
                    arr[i].style.outline="";
                }
                arr[index].style.backgroundColor="black";   
                arr[index].style.outline="2px solid rgba(255, 255, 255, .3)";
        }
        
        

Answer 1

用setinterval 了吧