求助，当鼠标经过一个元素，定时器停不下来，帮忙看看
0
悬赏园豆：5
[已解决问题]
解决于 2015-12-29 15:34
直接上代码吧
<!doctype html> <html> <head> <meta charset="utf-8"> <title>javascript实战手册练习</title> <style> *{ margin:0; padding:0;} ul{ list-style:none;} #image_box{ width:490px; height:170px; border:1px black solid; position:relative; cursor:pointer;} #image_box div{ width:490px; height:170px; position:absolute; top:0; left:0; /*注意这里定义过渡动画*/ opacity:0; transition:opacity 0.5s linear; } #btn { position:absolute; right:0; bottom:5px; text-align:center;} #btn li{ width:18px; height:18px; border-radius:90px; background-color:red; float:left; font-size:12px; line-height:18px; margin-left:5px; margin-right:5px; cursor:pointer;} #btn .diff{ color:#FFF; background-color:#000;} </style> </head> <body> <div id="image_box"> <div style="background-color:#F0F; opacity:1;">01广告</div> <div style="background-color:#C90">02广告</div> <div style="background-color:#39C">03广告</div> <div style="background-color:#99F">04广告</div> <div style="background-color:#999">05广告</div> <ul id="btn"> <li class="diff">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <script> var image_box=document.getElementById("image_box"); var btn=image_box.getElementsByTagName("li"); var image_box_div=image_box.getElementsByTagName("div"); var i=0; var index=0; function show(a){ for(i=0;i<btn.length;i++){ btn[i].className=""; btn[a].className="diff"; } for(i=0;i<image_box_div.length;i++){ image_box_div[i].style.opacity=0; image_box_div[a].style.opacity=1; } } for(i=0;i<btn.length;i++){ btn[i].index=i; btn[i].onmouseover=function(){ show(this.index); } } function lunbo(){ var play=setInterval(function(){ index++; if(index>=image_box_div.length) index=0; show(index); },2000) } lunbo(); image_box.onmouseover=function(){ clearInterval(play); } image_box.onmouseout=function(){ lunbo(); } </script> </body> </html>
最佳答案
1
看了楼主的代码，发现几个问题：
1、楼主应该是js新手，因为楼主竟然不知道方法里面所定义的局部变量（比如楼主用来记录定时器的play)，在方法外面是无法引用到的。
2、从show方法做太多无用功来看，更加印证了我对楼主是新手的猜想。
3、如果说这些代码全都是楼主自己写的，且作为一个新手能写出这样的代码，不说有多么厉害，至少可证明楼主是有些程序天赋的，思维总的来说还算严谨，没有太多的遗漏，美中不足是没有考虑鼠标移出后重启定时器以后切换图片的连续性，比如说先是自动切换到第2张，此时鼠标移动到了第4张，当鼠标移出以后我认为应该自动切换到第5张，而不是第3张。
好了，说了这么多，还是上我修改过后的代码，本着尽量少改的原则，我加了两行代码，改了一行代码，具体加和改的位置都是有注释的
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript实战手册练习</title>
<style>
*{ margin:0; padding:0;}
ul{ list-style:none;}
#image_box{ width:490px; height:170px; border:1px black solid; position:relative; cursor:pointer;}
#image_box div{ width:490px; height:170px; position:absolute; top:0; left:0;
/*注意这里定义过渡动画*/
opacity:0; transition:opacity 0.5s linear;
}
#btn { position:absolute; right:0; bottom:5px; text-align:center;}
#btn li{ width:18px; height:18px; border-radius:90px; background-color:red; float:left; font-size:12px; line-height:18px; margin-left:5px; margin-right:5px; cursor:pointer;}
#btn .diff{ color:#FFF; background-color:#000;}
</style>
</head>
<body>
<div id="image_box">
<div style="background-color:#F0F; opacity:1;">01广告</div>
<div style="background-color:#C90">02广告</div>
<div style="background-color:#39C">03广告</div>
<div style="background-color:#99F">04广告</div>
<div style="background-color:#999">05广告</div>
<ul id="btn">
<li class="diff">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script>
var image_box=document.getElementById("image_box");
var btn=image_box.getElementsByTagName("li");
var image_box_div=image_box.getElementsByTagName("div");
var i = 0;
var index = 0;
//这一行代码是我加的
var play = 0;
//这个方法里面的代码做了很多无用功，请楼主自己改进
function show(a){
for(i=0;i<btn.length;i++){
btn[i].className="";
btn[a].className="diff";
}
for(i=0;i<image_box_div.length;i++){
image_box_div[i].style.opacity=0;
image_box_div[a].style.opacity=1;
}
}
for(i=0;i<btn.length;i++){
btn[i].index=i;
btn[i].onmouseover=function(){
//这一行代码是我加的,没有这一行代码的话，重新启动定时器后第一次切换图片会出现跳跃
index = this.index;
show(this.index);
}
}
function lunbo(){
//这一行代码是我改的，去掉了var
play=setInterval(function(){
index++;
if(index>=image_box_div.length) index=0;
show(index);
},2000)
}
lunbo();
image_box.onmouseover=function(){
clearInterval(play);
}
image_box.onmouseout=function(){
lunbo();
}
</script>
</body>
</html>
收获园豆：5
受益了，的确是个JS新手，还希望大神推荐点学习资料，谢谢了。
我的建议是在学习别的东西之前，楼主先改进show方法
@脚本王子: 我没看出来show（）方法做了哪些无用功，还请大神讲解一下
@脚本王子:
还有点不太明白：
image_box.onmouseover=function(){
clearInterval(play);
}中，play是lunbo()方法里的局部变量,为什么可以在方法外引用？
我不是把play改成全局变量了吗？
任何时候只有一个li标签的class是diff，其他都是空，所以没有必须要循环把所有li的class都置空。
退一万步讲，即使你要循环置空，也没有必要把btn[a].className="diff"这一句话重复执行N次呀。
改透明度的代码也存在同样的问题
其他回答(1)
0
你的play这个变量，在停止函数中是访问不到的。
访问不到？应该可以吧？那怎么修改呢？
