<!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遇到问题只能靠这里的朋友啦
谢谢
