<!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 id="play">
<ul id="ul">
<li style="display:block;"><img src="images/0.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>
</ul>
<ol id="ol">
<li style="background:green;">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<div id="prev"><</div>
<div id="next">></div>
</div>
<script>
//获得所有的图片集合
var Imgs=document.getElementById('ul').getElementsByTagName('li');
var olobj=document.getElementById('ol').getElementsByTagName('li');
var Prev=document.getElementById('prev');
var Next=document.getElementById('next');
var Play=document.getElementById('play');
var ii=0;//默认显示的图片
var timer;//定时器
//图片自动切换
function autoplay(){
timer=setInterval(function(){
ii++;
if(ii>Imgs.length-1) ii=0;
goTo(ii);
},1000)
}
//跳转到指定的图片
function goTo(num){
for(var i=0;i<Imgs.length;i++){
if(num==i){
//显示当前的图片
olobj[num].style.background='green';
//改图片标记的样式
Imgs[num].style.display="block"
}else{
olobj[i].style.background='#000';
Imgs[i].style.display="none"
}
}
}
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>