【20190123】JavaScript-轮播图特效中出现的问题

使用纯html和JavaScript实现焦点轮播图特效，本来之前用setInterval()函数写的一个简单的循环轮播图，但是出现了两个问题：

 

1. 当网页被切换时，也就是网页失去焦点时，计时器函数还在进行，但是图片轮播特效没有执行，当网页被切回来，重新获得焦点时，轮播图就会将之前累积的动画缓存一次性执行。结果轮播图就以飞快的速度进行循环，然后就是空白页面，整个轮播图区域的顺序完全混乱。

 

2. 当快速点击next或pre按钮时，当前图片的动画还没完成就开始下一张图片的动画，轮播图的速度和顺序也会完全混乱，最后变成空白页面。

 

为了解决这两个问题我在网上搜了许多相关的资料，有人提到用window.onblur()和window.onfocus()来控制当网页失去焦点时清除计时器，网页重新获得焦点再声明一个新的计时器。但是可能是我写的代码问题吧，如果这样写的话原先设置的鼠标移入移出事件就不起作用了，点击按钮时图片的切换会和轮播图的自动切换产生冲突。

 

然后继续在网上找有没有解决办法，后来看到其他人用setTimeOut()函数写的轮播图效果，于是重新写了一下代码部分，并且加入一个判断当前图片切换动画是否完成的变量，让轮播图只有当前一个动画完成时才能触发后一张图片的切换动画。加入这个判断条件后，网页失去焦点时也不会有动画累计了，就算网页切换也不会产生顺序混乱的问题。

 

具体代码如下：

var pic=document.getElementById("pic1"); 
var next=document.getElementById("next"); 
var pre=document.getElementById("pre");
 var ad = document.getElementById("ad1"); 
var cirBtns=ad.getElementsByTagName("span");

var index=1; 
var animated=false;

pre.onclick=function () { 
    if (index===1){ 
            index=3;
     } else{
            index-=1; 
     }
     if (!animated){ 
         animate(1000); 
     }
     showBtns(); 
}

next.onclick=function () {
     if (index===3){ 
          index=1; 
     } else{
          index+=1; 
     }
     if (!animated){ 
          animate(-1000); 
     }
     showBtns(); 
}

function animate(offset) {
     animated=true; 
     var newLeft=pic.offsetLeft+offset; 
     var time=300; 
     var interval=5; 
     var speed=offset/(time/interval);

     function go() {
           if((speed<0 && pic.offsetLeft>newLeft)||(speed>0 && pic.offsetLeft<newLeft)){ 
               pic.style.left=pic.offsetLeft+speed+"px";
               setTimeout(go,interval); 
            } else { 
               animated=false;
               pic.style.left=newLeft+"px";
               if (newLeft <= -4000) {
                   pic.style.left = "-1000px"; 
               } else if (newLeft >= 0) { 
                   pic.style.left = "-3000px" 
               } 
            } 
     } 
     go();
}

function showBtns() { 
     for(var i=0;i<cirBtns.length;i++){ 
          var button=cirBtns[i];
          if(button.className === "on"){
               button.className="";
               break; 
          } 
      } 
      cirBtns[index-1].className="on"; 
}

for(var i=0;i<cirBtns.length;i++){
      var button=cirBtns[i]; 
      button.onclick=function () {
           if(this.className==="on"){
                return;
           }
           var myIndex=parseInt(this.getAttribute("index"));
           var offset=-1000*(myIndex-index); 
           if(!animated){ 
                animate(offset); 
           } 
           index=myIndex; 
           showBtns(); 
      } 
}

var autoTimer;
function autoPlay() { 
     autoTimer=setInterval(function () { next.onclick(); },3000); 
}
function autoStop() { clearInterval(autoTimer); }
ad.onmouseover=autoStop; 
ad.onmouseout=autoPlay;

autoPlay();