猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

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

直接上代码吧

<!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>
慕哥6287543
浏览 487回答 3
3回答

宝慕林4294392

看了楼主的代码，发现几个问题： 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>
0

HUX布斯

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

波斯汪

访问不到？应该可以吧？那怎么修改呢？
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript