首页新闻找找看学习计划

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

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>
少爷zwx的主页 少爷zwx | 初学一级 | 园豆:159
提问于:2015-12-29 14:25
< >
分享
最佳答案
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
脚本王子 | 小虾三级 |园豆: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)
0

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

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

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

支持(0) 反对(0) 少爷zwx | 园豆:159 (初学一级) | 2015-12-29 14:33
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册