Js轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Js轮播图</title>
<style>
*{padding:0;margin:0;}
ul,ol{list-style:none;}
.border{border:1px solid red;}
img{500px;height:300px;}
#play{500px;height:300px;margin:10px auto;position:relative;}
#play ul{list-style: none;}
#play ul li{display:none;}
#play ol{205px;height:50px;position:absolute;left:165px;top:260px;}
#play ol li{float:left;30px;height:30px;line-height: 30px;text-align: center;border:1px solid red;margin:5px;border-radius:50%;background:#000;color:#fff;}
#play #prev{50px;height:50px;font-size:50px;line-height: 30px;text-align: center;position:absolute;left:10px;top:130px;border:none;background:none;}
#play #next{50px;height:50px;font-size:50px;line-height: 30px;text-align: center;position:absolute;left:440px;top:130px;border:none;background:none;}
</style>
</head>
<body>
<div
}
}
}
Prev.onclick=function (){
ii -=1;
if(ii<0) ii=Imgs.length-1;
goTo(ii);
}
Next.onclick=function (){
ii+=1;
if(ii>Imgs.length-1) ii=0;
goTo(ii);
}
Play.onmouseover=function (){
clearInterval(timer);
}
Play.onmouseout=function (){
autoplay();
}
// for(var j=0;j<Imgs.length;j++){
// olobj[j].index=j;
// olobj[j].onmouseover=function (){
// // clearInterval(timer);
// goTo(this.index);
// ii=this.index;
// }
// }
for(var j=0;j<Imgs.length;j++){
// olobj[j].index=j;
olobj[j].onmouseover=function (){
goTo(this.innerHTML-1);
ii=this.innerHTML-1;
}
}
</script>
</body>
</html>