2 zaxlctjs zaxlctjs 于 2015.07.26 17:12 提问

JS利用定时器做的滑块效果,有一个小bug,自己找不到,求教下,谢谢大家
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>导航条推箱子</title>
<style type="text/css">
*{margin:0; padding:0;}
.main{background:#ccc; width:100%; height:42px;}
nav{width:950px; height:42px; position:relative; top:0; left:0; margin:auto; background:black;}
ul{position:absolute; left:0; top:6px;}
li{list-style:none; width:120px; background:black; float:left; margin:0 5px;
   text-align:center; color:white; font:14px/30px 黑体; z-index:2;}
li:hover{color:lightseagreen;}
#huakuai{width:130px; height:6px; position:absolute; left:0; top:36px;
         background:url('http://rawtj.photo.store.qq.com/psb?/V11aE2wE1DtywZ/..oVtPXI1JrwsrtdKOBiEWIC*vkOoS2ySJse0om9C3A!/r/dGEBAAAAAAAA') no-repeat;}
</style>
</head>
<body>
<div class="main">
    <nav>
        <ul>
            <li onmouseover="move(0)">首页</li>
            <li onmouseover="move(1)">所有产品</li>
            <li onmouseover="move(2)">男装</li>
            <li onmouseover="move(3)">女装</li>
            <li onmouseover="move(4)">新款</li>
        </ul>
        <div id="huakuai" style="left:0px;"></div>
    </nav>
</div>
</body>
<script type="text/javascript">
var tt=document.getElementById('huakuai');
function move(a){
    if(parseInt(tt.style.left)>(a*130)){
        timer=window.setInterval(function(){moveLeft(a*130);},30);
    }else if(parseInt(tt.style.left)<(a*130)){
        timer=window.setInterval(function(){moveRight(a*130);},30);
    }
     else{}
}
function moveRight(s1){
    var dd=parseInt(tt.style.left)+15;
    if(dd>=s1){
       dd=s1;
       window.clearInterval(timer);
    }
    tt.style.left=dd+'px';
}
function moveLeft(s2){
    var m=parseInt(tt.style.left)-15;
    if(m<=s2){
        m=s2;
        window.clearInterval(timer);
    }
    tt.style.left=m+'px';
}
</script>
</html>

这是定时器的一个小练习,鼠标放在不同的li上,下面的滑块会跟着移动
但是当鼠标来来回回在不停的li上移动时, 会出现bug,
就是滑块突然会在某一个位置突然停下,鼠标再放到其他的li上,滑块不动了
不知道代码哪里出错了

不好意思代码有点长,耽误大家的时间了,
新手自学JS遇到问题只能靠这里的朋友啦
谢谢

3个回答

qq_26349351
qq_26349351   2015.07.28 10:40
已采纳

<!DOCTYPE html>



导航条推箱子
<br> *{margin:0; padding:0;}<br> .main{background:#ccc; width:100%; height:42px;}<br> nav{width:950px; height:42px; position:relative; top:0; left:0; margin:auto; background:black;}<br> ul{position:absolute; left:0; top:6px;}<br> li{list-style:none; width:120px; background:black; float:left; margin:0 5px;<br> text-align:center; color:white; font:14px/30px 黑体; z-index:2;}<br> li:hover{color:lightseagreen;}<br> #huakuai{width:130px; height:6px; position:absolute; left:0; top:36px;<br> background:url(&#39;<a href="http://rawtj.photo.store.qq.com/psb?/V11aE2wE1DtywZ/..oVtPXI1JrwsrtdKOBiEWIC*vkOoS2ySJse0om9C3A!/r/dGEBAAAAAAAA&#x27;">http://rawtj.photo.store.qq.com/psb?/V11aE2wE1DtywZ/..oVtPXI1JrwsrtdKOBiEWIC*vkOoS2ySJse0om9C3A!/r/dGEBAAAAAAAA&#39;</a>) no-repeat;}<br>

  • 首页
  • 所有产品
  • 男装
  • 女装
  • 新款

var tt=document.getElementById('huakuai'); var timer = null; function move(a){ clearInterval(timer) if(parseInt(tt.style.left)>(a*130)){ timer=window.setInterval(function(){ moveLeft(a*130); },30); console.log(tt.style.left) console.log(a) }else if(parseInt(tt.style.left)<(a*130)){ timer=window.setInterval(function(){ moveRight(a*130); },30); } else{} } function moveRight(s1){ var dd=parseInt(tt.style.left)+15; if(dd>=s1){ dd=s1; window.clearInterval(timer); } tt.style.left=dd+'px'; } function moveLeft(s2){ var m=parseInt(tt.style.left)-15; if(m<=s2){ m=s2; window.clearInterval(timer); } tt.style.left=m+'px'; }


定时器还没关呢 移动之后又开了一个 冲突了啊 定时器先关再开

zaxlctjs
zaxlctjs 不好意思采纳晚了
2 年多之前 回复
github_30109321
github_30109321   2015.07.26 20:42

这种东西为什么不用css的动画?

zaxlctjs
zaxlctjs 在学js嘛
2 年多之前 回复
qq_26349351
qq_26349351   2015.07.28 10:40

<!DOCTYPE html>



导航条推箱子
<br> *{margin:0; padding:0;}<br> .main{background:#ccc; width:100%; height:42px;}<br> nav{width:950px; height:42px; position:relative; top:0; left:0; margin:auto; background:black;}<br> ul{position:absolute; left:0; top:6px;}<br> li{list-style:none; width:120px; background:black; float:left; margin:0 5px;<br> text-align:center; color:white; font:14px/30px 黑体; z-index:2;}<br> li:hover{color:lightseagreen;}<br> #huakuai{width:130px; height:6px; position:absolute; left:0; top:36px;<br> background:url(&#39;<a href="http://rawtj.photo.store.qq.com/psb?/V11aE2wE1DtywZ/..oVtPXI1JrwsrtdKOBiEWIC*vkOoS2ySJse0om9C3A!/r/dGEBAAAAAAAA&#x27;">http://rawtj.photo.store.qq.com/psb?/V11aE2wE1DtywZ/..oVtPXI1JrwsrtdKOBiEWIC*vkOoS2ySJse0om9C3A!/r/dGEBAAAAAAAA&#39;</a>) no-repeat;}<br>

  • 首页
  • 所有产品
  • 男装
  • 女装
  • 新款

var tt=document.getElementById('huakuai'); var timer = null; function move(a){ clearInterval(timer) if(parseInt(tt.style.left)>(a*130)){ timer=window.setInterval(function(){ moveLeft(a*130); },30); console.log(tt.style.left) console.log(a) }else if(parseInt(tt.style.left)<(a*130)){ timer=window.setInterval(function(){ moveRight(a*130); },30); } else{} } function moveRight(s1){ var dd=parseInt(tt.style.left)+15; if(dd>=s1){ dd=s1; window.clearInterval(timer); } tt.style.left=dd+'px'; } function moveLeft(s2){ var m=parseInt(tt.style.left)-15; if(m<=s2){ m=s2; window.clearInterval(timer); } tt.style.left=m+'px'; }


定时器还没关呢 移动之后又开了一个 冲突了啊 定时器先关再开

Csdn user default icon
上传中...
上传图片
插入图片