求助，当鼠标经过一个元素，定时器停不下来，帮忙看看

悬赏园豆：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>

HTML css javascript

少爷zwx | 初学一级 | 园豆：159
提问于：2015-12-29 14:25

< >

最佳答案

看了楼主的代码，发现几个问题：

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

脚本王子 | 小虾三级 |园豆：779 | 2015-12-29 15:18

受益了，的确是个JS新手，还希望大神推荐点学习资料，谢谢了。

少爷zwx | 园豆：159 (初学一级) | 2015-12-29 15:34

我的建议是在学习别的东西之前，楼主先改进show方法

脚本王子 | 园豆：779 (小虾三级) | 2015-12-29 15:43

@脚本王子: 我没看出来show（）方法做了哪些无用功，还请大神讲解一下

少爷zwx | 园豆：159 (初学一级) | 2015-12-29 15:51

@脚本王子:

还有点不太明白：

image_box.onmouseover=function(){
clearInterval(play);
}中，play是lunbo()方法里的局部变量,为什么可以在方法外引用？

少爷zwx | 园豆：159 (初学一级) | 2015-12-29 15:59

我不是把play改成全局变量了吗？

脚本王子 | 园豆：779 (小虾三级) | 2015-12-29 16:13

任何时候只有一个li标签的class是diff，其他都是空，所以没有必须要循环把所有li的class都置空。

退一万步讲，即使你要循环置空，也没有必要把btn[a].className="diff"这一句话重复执行N次呀。

改透明度的代码也存在同样的问题

脚本王子 | 园豆：779 (小虾三级) | 2015-12-29 16:18

其他回答(1)

你的play这个变量，在停止函数中是访问不到的。

幻天芒 | 园豆：37207 (高人七级) | 2015-12-29 14:31

访问不到？应该可以吧？那怎么修改呢？

支持(0) 反对(0) 少爷zwx | 园豆：159 (初学一级) | 2015-12-29 14:33

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

求助，当鼠标经过一个元素，定时器停不下来，帮忙看看

欢迎，请先登录或者注册。