【20190123】JavaScript-轮播图特效中出现的问题
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了【20190123】JavaScript-轮播图特效中出现的问题，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3605字，纯文字阅读大概需要6分钟。
内容图文
使用纯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();
内容总结
以上是互联网集市为您收集整理的【20190123】JavaScript-轮播图特效中出现的问题全部内容，希望文章能够帮你解决【20190123】JavaScript-轮播图特效中出现的问题所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】