<div id="container"><div id="list" style="left:-600px"><img src="img/4.jpg" alt="4">
<img src="img/1.jpg" alt="1">
<img src="img/2.jpg" alt="2">
<img src="img/3.jpg" alt="3">
<img src="img/4.jpg" alt="4">
<img src="img/1.jpg" alt="1"></div><div id="buttons">
<span index=1 class="on"></span>
<span index=2></span>
<span index=3></span>
<span index=4></span></div>
<a  id="prev" class="arrow"></a>
<a  id="next" class="arrow"></a>
</div>

*{margin: 0; padding: 0; text-decoration: none;}body{padding: 20px;}#container{   position: relative;overflow: hidden; width: 500px; height: 500px; border: 3px solid rgb(247, 250, 203);}/*容器宽高为图片的宽度和高度*/#list{   position: absolute;z-index: 1;width: 3000px; /*list的所有图片数和图片的乘积*/height: 500px;}#list img{float: left;width: 500px;/*规定的图片的宽度*/}#buttons{position: absolute; z-index: 2; bottom: 20px; left: 250px;width: 100px;height: 10px;}#buttons span{float: left; width: 10px;height: 10px;margin-right: 5px;cursor: pointer; border: 1px solid #fff;border-radius: 50%; background: rgb(141, 139, 139);}#buttons .on{background:pink;}.arrow{font-size: 36px; font-weight: bold; line-height: 39px;position: absolute; z-index: 2; top: 180px; display: none;width: 40px; height: 40px;  cursor: pointer; text-align: center; color:pink;background-color: rgb(229, 247, 194);}.arrow:hover{background-color:rgb(194, 212, 156) ;}#container:hover .arrow{display: block;}#prev{left: 20px;}#next{right: 20px;}

 var  prev=document.getElementById("prev");var  next=document.getElementById("next");var  list=document.getElementById("list");var buttons=document.getElementById("buttons").getElementsByTagName("span");var index=1;var timer;var animated=false;var container=document.getElementById("container");function shownButton(){for(var i=0;i<buttons.length;i++){if(buttons[i].className=="on"){buttons[i].className="";break;  }}buttons[index-1].className="on";
}
function animate(offset){var time=100;//根据图片宽度来，最好和inteval相除为整数，不然后面移动会出问题，var inteval=10;var speed=offset/(time/inteval);animated=true;var newLeft=parseInt(list.style.left)+offset;function go(){if((speed>0&&parseInt(list.style.left)<newLeft)||(speed<0&&parseInt(list.style.left)>newLeft)){list.style.left=parseInt(list.style.left)+speed+"px";setTimeout(go,inteval);//递归函数
        }else{animated=false;if(newLeft>-500){//当大于第一个图的位移量切换到第4张图list.style.left=-2000+"px";};if(newLeft<-2000){//当小于最后一个图的位移量切换到第一张图list.style.left=-500+"px";}   }}go();   }prev.onclick=function(){if(!animated){if(index==1){index=4;//根据自己代码的index值进行修改
          }else{index-=1;}shownButton();animate(500);//传入图片宽度
      }}next.onclick=function(){if(!animated){if(index==4){//根据自己代码的index值进行修改index=1;}else{index+=1;}shownButton();animate(-500);//第一章图片宽度
      }}for(var i=0;i<buttons.length;i++){buttons[i].onclick=function(){if(this.className=="on"){return;}var myIndex=parseInt(this.getAttribute(index));var offset=-500*(myIndex-index);//偏移量根据实际情况修改if(!animated){animate(offset);}index=myIndex;shownButton();}}function play(){timer=setInterval(function(){next.onclick();},2000);  }function stop(){clearInterval(timer);}play();container.onmouseover=stop;container.onmouseout=play;