JS的setInterval定时器2图片切换按钮事件修改
之前的两个博文里：JS点击上一张下一张轮播li标签1、JS的setInterval定时器、
一个设置了上一页下一页手动按钮切换显示图片，一个用定时器设置了每隔一秒执行一次下一页的的那个函数。
但是，定时器和手动切换放到一块的时候，会发现有点问题，例如，点击了一下上一页按钮，图片切换到了上一页，但是如果定时器刚好到了切换下一页的时间，会表现为，刚点了下上一页，接着就跳转到了下一页，这是不合理的。
此外，一般还有需要连续点击的情况，比如连续点击切换到自己想要看的图片，到了自己要看的图片，需要等一会再跳转到下一页。
点击下一页之后，一般也是需要看下一页的图片，所点下一页后也需要停留一会。
因为下一页这个事件在定时器里，每隔一段时间就执行一次，所以要是在这个事件里写方法，每次定时器到一定时间就执行，所以只能和定时器里的next()方法分开，所以这里写了个next2()，next2()里除了和next()里有一样的部分，还有一个就是把wait设置为0。
这次是定时2秒执行一次，这两秒拆分一下，循环10次，每次200毫秒，10乘以200就是2000毫秒，也就是每次两秒的速度进行定时显示图片。
加一个变量wait，wait的值是从0到10，不断循环，当等于11的时候，会进行图片切换。
然后在上一页和下一页里设置wait归零，这样点过上一页下一页之后，（按钮可以多次点击切换，因为wait影响的是定时器的时间初始位置），定时器就不会很快跳转到下一页，而是循环够10个200毫秒之后才会进行切换，这就有了等待时间。
wait这个变量，可以控制定时器不会马上跳转，即是点击切换后保证等两秒才会切换到下一张，且不会影响按钮本身的事件，只影响定时器的初始时间位置（定时器初始时间位置指的是wait=0后，需循环10次200毫秒的定时器才会执行切换图片）。
测试代码：（前面的博文里有前面的代码描述，这里就加了个wait变量）
<style> .box1{list-style-type:none;width:200px;height:100px;overflow:hidden;position:relative;} .box1 li{width:200px;height:100px;position:absolute;top:0px;left:0px;} .box1 li.now{opacity:1;}/**1代表完全不透明**/ .box1 li.others{opacity:0;}/**1代表完全透明**/ </style> </head> <body> <div class="box1"> <ul class="list1"> <li id="img1" class="now"><img src="images/img1.png"></li> <li id="img2" class="others"><img src="images/img2.png"></li> <li id="img2" class="others" style="background:red"></li> </ul> </div> <input type="button" value="上一张" onclick="pre()">< br> <input type="button" value="下一张" onclick="next2()"> <script> var index=0; var lis=document.getElementsByTagName("li"); var indexlength=lis.length-1;//长度-1是最后一个的索引 var wait=0; var clicknext=0; function pre(){ index--; if(index<0) { index=indexlength; } for(var i=0;i<lis.length;i++) { lis[i].className="others"; } lis[index].className="now"; console.log("当前显示第"+index+"pre()点击后,时间："+(new Date()).toLocaleTimeString()); wait=0; }; function next(){ index++; if(index>indexlength) { index=0; } for(var i=0;i<lis.length;i++) { lis[i].className="others"; } lis[index].className="now"; }; function next2(){ next(); wait=0; console.log("当前显示第"+index+"next2()点击后,时间："+(new Date()).toLocaleTimeString()); }; var timer=setInterval(function(){ wait++; if(wait>10) {next(); console.log("当前显示第"+index+"张图片，时间:"+(new Date()).toLocaleTimeString()); wait=0; } },200); //var timer=setInterval(function(){next();var date=new Date();console.log("当前显示第"+index+"张图片，时间:"+(new Date()).toLocaleTimeString());},2000); </script>
图示：
