轮播的bug

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <link href="testCss.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
      <div class="main" id="main">
       
       <div class="pic active" style="background-color:red;"></div>
       <div class="pic" style="background-color:blue;"></div>
       <div class="pic" style="background-color:yellow;"></div>
      </div>

      <script src="jsTest.js"></script>
    </body>
</html>

*{
	margin:0px;
	padding:0px;
}

.main{
	width:300px;
	height:350px;
	border:1px solid blue;
	position: relative;
}

.pic{
	width:80px;
	height:100px;
	display:none;
}


.main div{
	position:absolute;
}

.active{
	display:block;
}

var onePic=document.getElementById("main");
var pics=document.getElementById("main").getElementsByTagName("div");

var len=pics.length;
var index=0;
var timer;
main.onmouseout=function(){
	timer=setInterval(
		function(){
			index++;
			if(index>=len){
				index=0;
			}
			for(var i=0; i<len; i++){
				pics[i].className="pic";
			}
			pics[index].className="pic active";

			
		},1000);
}
main.onmouseout();

main.onclick=function(){
	clearInterval(timer);
}

老师，我如果在mian里随便移动鼠标，那么轮播就会错乱，变动飞快而且也无法停止轮播，我似乎发现问题出在我的onclick事件上，我是想通过点击main来实现颜色禁止，但不知为何出了bug，而onmouseover好像没事

慕丝6937110 2018-09-14

源自：项目：JS实现轮播特效 3-5 图片的自动轮播和停止

收起

1回答

好帮手慕夭夭 2018-09-14 10:08:52

因为当移动在轮播元素区域移动鼠标离开时 , 会触发onmouseout , 此时又会触发一个定时器 , 此时会有两个定时器 , 如果移动多了 , 定时器会更多 , 建议鼠标移动时先清除之前的定时器 ,然后在设置新的定时器 :

希望能够帮到你 , 祝学习愉快 ,望采纳

收起回答

提问者慕丝6937110 #1

起初timer是没有值的，第一次onmouseout后，这个if不会执行，然后开始执行timer=setinterval（xxxxxxx）中的代码，当我鼠标第二次滑过mian这个div的时候，此时timer有值了，if判断为true，所以执行了清除轮播的代码，然后再一次执行了timer=setinterval（xxxxx）的代码，开始又一次轮播。这样的话即使随意滑动鼠标，虽然还是会有无数个onmouseout的定时器会叠加执行，但效果就不会使轮播加快了，因为每一次都是先清除了上一轮的轮播效果，然后再执行又一次的轮播效果。这也正是clearInterval（timer）必须要写在if条件句里的必要性，如果没有if条件，那所有代码都不会执行了，一上来就都清除了，是这样理解的吗，老师

2018-09-14 10:58:43
好帮手慕夭夭回复提问者慕丝6937110 #2

优秀 ! 可以这样理解 .最后一个关于写在if中 ,其实不写if也可以 ,代码顺序执行 .清除之后 ,. 后面有重新执行定时器了 . 加个判断 ,是为了没有定时器的时候就不执行清除代码了 . 这样逻辑清晰哦 .

2018-09-14 11:05:04
提问者慕丝6937110 回复好帮手慕夭夭 #3

搞懂了，多谢老师

2018-09-14 11:10:01