直接上代码了：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播2</title> </head> <style type="text/css"> *{margin:0px;padding:0px;} #banner{width:400px;margin:30px auto 0;position:relative;} #tab{width:400px;height:320px; margin:0px auto;overflow:hidden;} #banner ul li{list-style:none;} #tab>li:not(:first-child){display:none;} #list{position:absolute;z-index:2;bottom:10px;right:10px;} #list li{display: inline-block;height:10px;width:10px;background:#CCCCCC;border:1px solid #666666; margin-left:5px;color:#000000;line-height: 10px;font-size:8px;text-align: center;cursor:pointer;} #list .on{background:red;color:#FFFFFF} #btn{z-index: 3;display: none;} #btn a{width:60px;height:60px;position:absolute;top:130px;opacity:0.5;} #btn .prev{left:20px;background:url(img/btn.gif) left 0px no-repeat;} #btn .next{right:20px;background:url(img/btn.gif) left -60px no-repeat;} </style> <script type="text/javascript"> window.onload=function() { var oBanner=document.getElementById('banner');//获取图片列表id var oTab=document.getElementById('tab');//获取图片列表id var aPic=oTab.getElementsByTagName('li');//将图片li定义为数组 var oList=document.getElementById('list');//获取编号列表id var aList=oList.getElementsByTagName('li');//将编号列表Li定义为数组 var oBtn=document.getElementById('btn'); var oPrev=document.getElementById("prev"); var oNext=document.getElementById("next"); var index=0; var timer=null; //自动播放 timer=setInterval(autoPlay,1000);//此处调用autoPlay函数时，（）不能带，带就出错 //鼠标悬浮时，停止轮播 oBanner.onmousemove=function() { oBtn.style.display='block'; clearInterval(timer); } //鼠标离开，继续轮播 oBanner.onmouseout=function() { oBtn.style.display='none'; timer=setInterval(autoPlay,1000);//此处必须重新设置定时器 } //点击左边按钮，上一页 oPrev.onclick=function() { index=index-1; if(index<0) { index=aPic.length-1; } changePic(index); } //点击右边按钮，下一页 oNext.onclick=function() { index=index+1; if(index==aPic.length) { index=0; } changePic(index); } //播放函数 function autoPlay() { index=index+1; if(index==aPic.length) { index=0; } changePic(index); } //把数字与图片对应起来 for(var i=0;i<aList.length;i++) { aList[i].onmouseover=function() { clearInterval(timer); index=this.innerText-1; changePic(index); } } //图片、编号切换 function changePic(curIndex) { for(var i=0;i<aPic.length;i++) { aPic[i].style.display='none'; aList[i].className=''; } aPic[curIndex].style.display="block"; aList[curIndex].className="on"; } } </script> <body> <div id="banner"> <ul id="tab"> <li><img src="img/1.jpg" width="400" height="320"/></li> <li><img src="img/2.jpg" width="400" height="320"/></li> <li><img src="img/3.jpg" width="400" height="320"/></li> <li><img src="img/4.jpg" width="400" height="320"/></li> <li><img src="img/5.jpg" width="400" height="320"/></li> <li><img src="img/6.jpg" width="400" height="320"/></li> </ul> <ul id="list"> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <div id="btn"> <a href="javascript:;" class="prev" id="prev"></a> <a href="javascript:;" class="next" id="next"></a> </div> </div> </body> </html>