使用纯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.onclick=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.onclick=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.onclick=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.onmouseover=autoStop; 91 ad.onmouseout=autoPlay; 92 93 autoPlay();