焦点图轮播 定时器 清除不了....求大牛指点
<!DOCTYPE html>
<html>
<head>
<title>JS轮播</title>
<meta charset="utf-8" />
<style type="text/css">
#bBox {
width: 600px;
height: 400px;
margin: 100px auto;
border: 2px solid #999;
overflow: hidden;
position: relative;
}
#picBox {
width: 4200px;
height: 400px;
position: absolute;
}
#picBox img {
float: left;
}
#btnBox>a {
position: absolute;
top: 40%;
z-index: 2;
width: 40px;
height: 30px;
border-radius: 5px;
background: rgba(0,0,0,0.2);
line-height: 30px;
text-align: center;
font-weight: bold;
cursor: pointer;
}
#prev {
left: 10px;
}
#next {
right: 10px;
}
#btN {
position: absolute;
bottom: 10px;
left: 200px;
margin: 0
}
#btN li {
width: 10px;
height: 10px;
margin-left: 10px;
background: #ddd;
float: left;
list-style: none;
cursor: pointer;
}
#btN .Bon {
background: black;
}
</style>
<script type="text/javascript">
window.onload = function(){
function $(idd){
return document.getElementById(idd)
}
var liss = $("btN").getElementsByTagName('li'),
oIndex = 0,
timer,
isM = false,
speed;
var A;
for(var i=0;i<liss.length;i++){
liss[i].index = i;
liss[i].onclick = function(){
if (!isM) {
isM = true
var dis = this.index - oIndex
speed = (this.index - oIndex)*-20
oIndex = this.index;
var Dis = -600*dis
move(speed,Dis)
}
}
$("next").onclick = function(){
if (!isM) {
isM=true;
oIndex++;
speed = -20;
var Dis = -600;
var L = -3600;
var R = -600
if(oIndex==5){oIndex=0}
move(speed,Dis,L,R)
}
}
auto();
function auto(){
A = setInterval(function(){ //定时器在这，，，取消定时器 没作用。。。怎么回事（没有上传图，可以看下面的五个按钮）
$("next").click()
},1300);
$("bBox").onmouseover = function(){
clearInterval(A);
}
}
$("prev").onclick = function(){
if (!isM) {
isM=true;
oIndex--;
speed = 20;
var Dis = 600;
var L = 0;
var R = -3000;
if(oIndex==-1){oIndex=4}
move(speed,Dis,L,R)
}
}
}
function move(ospeed,oDis,oL,oR){
var lastDis = parseInt($("picBox").style.left)
timer = setInterval(function(){
$("picBox").style.left = parseInt($("picBox").style.left) + ospeed +'px';
if (parseInt($("picBox").style.left)-lastDis == oDis ) {
clearInterval(timer)
isM = false;
if (oL !== "") {
if (parseInt($("picBox").style.left) == oL ) {
$("picBox").style.left = oR + 'px'
};
}
lastDis = parseInt($("picBox").style.left)
showBtn();
};
},10)
}
function showBtn(){
for(var j=0;j<liss.length;j++){
liss[j].className = "";
}
liss[oIndex].className = "Bon"
}
}
</script>
</head>
<body>
<div id="bBox">
<div id="btnBox"> <a id="prev"><</a> <a id="next">></a> </div>
<div id="picBox" style="left:-600px"> <img src="image/5.jpg" /> <img src="image/1.jpg" /> <img src="image/2.jpg" /> <img src="image/3.jpg" /> <img src="image/4.jpg" /> <img src="image/5.jpg" /> <img src="image/1.jpg" /> </div>
<ul id="btN">
<li class="Bon"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
