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

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

 

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

 

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

 

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

 

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

 

具体代码如下：

 1 var pic=document.getElementById("pic1"); 
 2 var next=document.getElementById("next"); 
 3 var pre=document.getElementById("pre");
 4  var ad = document.getElementById("ad1"); 
 5 var cirBtns=ad.getElementsByTagName("span");
 6 
 7 var index=1; 
 8 var animated=false;
 9 
10 pre.οnclick=function () { 
11     if (index===1){ 
12             index=3;
13      } else{
14             index-=1; 
15      }
16      if (!animated){ 
17          animate(1000); 
18      }
19      showBtns(); 
20 }
21 
22 next.οnclick=function () {
23      if (index===3){ 
24           index=1; 
25      } else{
26           index+=1; 
27      }
28      if (!animated){ 
29           animate(-1000); 
30      }
31      showBtns(); 
32 }
33 
34 function animate(offset) {
35      animated=true; 
36      var newLeft=pic.offsetLeft+offset; 
37      var time=300; 
38      var interval=5; 
39      var speed=offset/(time/interval);
40 
41      function go() {
42            if((speed<0 && pic.offsetLeft>newLeft)||(speed>0 && pic.offsetLeft<newLeft)){ 
43                pic.style.left=pic.offsetLeft+speed+"px";
44                setTimeout(go,interval); 
45             } else { 
46                animated=false;
47                pic.style.left=newLeft+"px";
48                if (newLeft <= -4000) {
49                    pic.style.left = "-1000px"; 
50                } else if (newLeft >= 0) { 
51                    pic.style.left = "-3000px" 
52                } 
53             } 
54      } 
55      go();
56 }
57 
58 function showBtns() { 
59      for(var i=0;i<cirBtns.length;i++){ 
60           var button=cirBtns[i];
61           if(button.className === "on"){
62                button.className="";
63                break; 
64           } 
65       } 
66       cirBtns[index-1].className="on"; 
67 }
68 
69 for(var i=0;i<cirBtns.length;i++){
70       var button=cirBtns[i]; 
71       button.οnclick=function () {
72            if(this.className==="on"){
73                 return;
74            }
75            var myIndex=parseInt(this.getAttribute("index"));
76            var offset=-1000*(myIndex-index); 
77            if(!animated){ 
78                 animate(offset); 
79            } 
80            index=myIndex; 
81            showBtns(); 
82       } 
83 }
84 
85 var autoTimer;
86 function autoPlay() { 
87      autoTimer=setInterval(function () { next.onclick(); },3000); 
88 }
89 function autoStop() { clearInterval(autoTimer); }
90 ad.οnmοuseοver=autoStop; 
91 ad.οnmοuseοut=autoPlay;
92 
93 autoPlay();

 

转载于:https://www.cnblogs.com/huangrui-dori/p/10401347.html