<!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遇到問題只能靠這裡的朋友啦
謝謝
<!DOCTYPE html>
定時器還沒關呢 移動之後又開了一個 沖突了啊 定時器先關再開
