【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();