<!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{width:500px;height:300px;} #play{width:500px;height:300px;margin:10px auto;position:relative;} #play ul{list-style: none;} #play ul li{display:none;} #play ol{width:205px;height:50px;position:absolute;left:165px;top:260px;} #play ol li{float:left;width:30px;height:30px;line-height: 30px;text-align: center;border:1px solid red;margin:5px;border-radius:50%;background:#000;color:#fff;} #play #prev{width:50px;height:50px;font-size:50px;line-height: 30px;text-align: center;position:absolute;left:10px;top:130px;border:none;background:none;} #play #next{width: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.οnclick=function (){ ii -=1; if(ii<0) ii=Imgs.length-1; goTo(ii); } Next.οnclick=function (){ ii+=1; if(ii>Imgs.length-1) ii=0; goTo(ii); } Play.οnmοuseοver=function (){ clearInterval(timer); } Play.οnmοuseοut=function (){ autoplay(); }// for(var j=0;j<Imgs.length;j++){
// olobj[j].index=j; // olobj[j].οnmοuseοver=function (){ // // clearInterval(timer); // goTo(this.index); // ii=this.index; // } // } for(var j=0;j<Imgs.length;j++){ // olobj[j].index=j; olobj[j].οnmοuseοver=function (){ goTo(this.innerHTML-1); ii=this.innerHTML-1; } } </script></body></html>