这段代码点击左按钮，为什么会跳着走
第5张，跳到第3张，再跳到第1张
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>时间框架封装整合-自动轮播</title>
<style>
*{margin:0;padding:0;}
#banner{
width:520px;;
height:280px;
margin:100px auto;
border:1px solid red;
position:relative;
}
#pic{
width:520px;
height:280px;
/*overflow:hidden;*/
}
#pic ul{
width:1000%;
height:280px;
margin-left:-520px;
}
#pic ul li{
list-style:none;
float:left;
}
#btn div{
width:23px;
height:36px;
font-weight:bold;
font-size:16px;
color:#fff;
position:absolute;
background:rgba(0,0,0,0.5);
line-height:36px;
text-align:center;
cursor:pointer;
top:50%;
margin-top:-18px;
}
#left{
left:0;
}
#right{
right:0;
}
#tab ul{
width:71px;
height:14px;
position:absolute;
border-radius:7px;
bottom:15px;
left:50%;
margin-left:-35px;
background:rgba(255,255,255,0.5);
}
#tab ul li{
width:10px;
height:10px;
margin:2px 2px;
list-style:none;
border-radius:100%;
background:#999;
float:left;
cursor:pointer;
}
#tab ul li.on{
background:#f60;
}
</style>
</head>
<body>
<div id="banner">
<div id="pic">
<ul>
<li><img src="images/5.jpg" alt=""/></li>
<li><img src="images/1.jpg" alt=""/></li>
<li><img src="images/2.jpg" alt=""/></li>
<li><img src="images/3.jpg" alt=""/></li>
<li><img src="images/4.jpg" alt=""/></li>
<li><img src="images/5.jpg" alt=""/></li>
<li><img src="images/1.jpg" alt=""/></li>
</ul>
</div>
<div id="btn">
<div id="left"><</div>
<div id="right">></div>
</div>
<div id="tab">
<ul>
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script type="text/javascript" src="move1.js"></script>
<script type="text/javascript" >
(function(){
var TabLi=document.getElementById("tab").getElementsByTagName("li");
var oUl=document.getElementsByTagName("ul")[0];
var oLeft=document.getElementById("left");
var oRight=document.getElementById("right");
var oBanner=document.getElementById("banner");
var n=0;
var nowTime=0;
var timer
for (var i=0;i<TabLi.length;i++)
{
TabLi[i].ligoudaner=i;
TabLi[i].onclick=function(){
TabLi[n].className="";
n=this.ligoudaner;
change();
};
};
oRight.onclick=function(){
if (new Date()-nowTime>300)
{
nowTime=new Date();
TabLi[n].className="";
n++;
n%=TabLi.length+1;
change();
}
};
oLeft.onclick=function(){
if (new Date()-nowTime>300)
{
nowTime=new Date();
TabLi[n].className="";
n--;
n=n<0?TabLi.length-1:n-1
change();
}
};
auto();
oBanner.onmouseover=function(){
clearInterval(timer);
};
oBanner.onmouseleave=function(){
auto();
};
function auto(){
timer=setInterval(function(){
TabLi[n].className="";
n++;
n%=TabLi.length+1;
change();
},3000);
};
function change(){
var now=n;
/*if (now>=TabLi.length)
{
now=0
}*/
now%=TabLi.length;
if (now<0)
{
now=TabLi.length-1;
}
TabLi[now].className="on";
move(oUl,{marginLeft:-520*(n+1)+"px"},300,function(){
if (n==TabLi.length)
{
this.style.marginLeft="-520px";
n=now;
}
else if(n==-1)
{
this.style.marginLeft=-520*TabLi.length+"px";
n=now;
}
});
};
})();
</script>
</body>
</html>
