代码如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>图片轮播效果</title><style type="text/css">*{margin: 0;padding: 0;text-decoration: none;}body{padding: 20px;}#container{position: relative;width: 600px;height: 400px;border: 1px solid #333;overflow: hidden;margin-left: auto;margin-right: auto;}#list{position: absolute;z-index: 1;width: 4200px;height:400px;}#list img{float: left;width:600px;height:400px;}#buttons{position: absolute;left:250px;buttom:20px;z-index: 2;height:10px;width:100px;}#buttons span{float: left;margin-right: 5px;width: 10px;height:10px;border:1px solid #fff;border-radius: 50%;background: #333;cursor: pointer;//鼠标悬停样式}#buttons.on{background: orangered;}.arrow{position: absolute;top:180px;z-index: 2;display: none;width: 40px;height:40px;font-size: 36px;font-weight:bold;line-height: 39px;text-align: center;color: #fff;background-color: RGBA(0,0,0,.3);cursor: pointer;}.arrow:hover{background-color: RGBA(0,0,0,.7);}#container:hover.arrow{display: block;}#prev{left:20px;}#next{right:20px;}</style><script type="text/javascript">window.onload=function(){var container=document.getElementById('container');var list=document.getElementById('list');var buttons=document.getElementById('buttons').getElementsByTagName('span');var prev=document.getElementById('prev');var next=document.getElementById('next');var index=1;var timer;function animate(offset){var newLeft=parseInt(list.style.left)+offset;list.style.left=newLeft+'px';//无限滚动判断if(newLeft>-600){list.style.left=-3000+'px';}if(newLeft<-3000){list.style.left=-600+'px';}}function play(){//重复执行的定时器timer=setInterval(function(){next.onclick();},2000)}function stop(){clearInterval(timer);}function buttonsShow(){//将之前小圆点的样式消除for(var i=0;i<buttons.length;i++){if(buttons[i].className=="on"){buttons[i].className="";}}//数组从0开始，index需要减一buttons[index-1].className="on";}prev.onclick=function(){index-=1;if(index<1){index=5}buttonsShow();animate(600);};next.onclick=function(){index+=1;if(index>5){index=1}animate(-600);buttonsShow();};for(var i=0;i<buttons.length;i++){(function(i){buttons[i].onclick=function(){var clickIndex=parseInt(this.getAttribute('index'));var offset=600 * (index-clickIndex);animate(offset);index=clickIndex;buttonsShow();}})(i)}container.onmouseover=stop;container.onmouseout=play;play();}</script></head><body><div id="container"><div id="list" style="left:-600px;"><img src="img/p5.jpg" alt="5"/><img src="img/p2.jpg" alt="1"/><img src="img/p3.jpg" alt="2"/><img src="img/p4.jpg" alt="3"/><img src="img/p5.jpg" alt="4"/><img src="img/p1.jpg" alt="5"/></div><div id="buttons"><span index="1" class="on"></span><span index="2"></span><span index="3"></span><span index="4"></span><span index="5"></span></div><a href="javascript:;" id="prev" class="arrow"><</a><a href="javascript:;" id="next" class="arrow">></a></div></body>
</html>
