<div id="container"><div id="list" style="left: -600px;"> //設置圖像的父級元素定位為向左600px，即是左移一個圖片的寬度<img src="images/16.jpg" 藍色代碼表示的圖片是相同的。這是因為每張圖片都有向前和向后兩種單擊<img src="images/13.jpg" 事件，要使第一張圖片向前單擊顯示第五張圖片，就需要在其前方添加第五<img src="images/14.jpg" 張圖片，避免在第一張圖片單擊向左時顯示空白；同理，在第五張圖片之<img src="images/15.jpg" 后也要添加第一張圖片，使其實現平穩過渡<img src="images/16.jpg" style="margin: 0px; padding: 0px; outline: none; line-height: 25.2px; font-size: 14px; width: 660px; overflow: hidden; clear: both; font-family: tahoma, arial, "Microsoft YaHei";">	
*{margin: 0;padding: 0;text-decoration: none;} //設置所有元素的基本樣式body{padding: 20px;}#container{position: relative; //設置最外層的div元素的定位為相對定位，即是相對與未設置定位之前的位置進行定位width: 600px;height: 400px;border: 3px solid #333;overflow: hidden; //設置容器的寬高，并將溢出部分設置為隱藏}#list{position: absolute; //設置圖片所在的父級div的定位為絕對定位，即是相對于已定位的父級元素進行定位z-index: 1; //設置該div的顯示層次width: 4200px; //該div是所有圖片的父級元素，因此其寬高的設置應該包含所有的圖片height: 400px;}#list img{float: left; //設置圖片的顯示的顯示方式，為向左浮動width: 600px;height: 400px;}#buttons{position: absolute; //設置屏幕下方的所有圓點的定位方式，相對于容器元素進行絕對定位left: 250px; //距離父級已進行定位的元素的左側距離為250pxbottom: 20px;z-index: 2; //設置圓點的顯示層級為2，即是在圖片div的上方height: 10px;width: 100px;}#buttons span{float: left;margin-right: 5px;width: 10px;height: 10px;border: 1px solid #fff;border-radius: 50%; //半徑為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;}*/

window.onload=function(){var list=document.getElementById('list'); //獲取圖片元素的父級元素，并命名為listvar prev=document.getElementById('prev'); //獲取左箭頭var next=document.getElementById('next'); //獲取右箭頭function animate(offset){ //設置一個名為animate的函數，該函數接收一個參數var newleft=parseInt(list.style.left)+offset; //獲取圖片的父級元素的左側的定位值，并加上傳入的參數offsetif(newleft<-3000){ //圖片的父級div在移動的過程中，顯示的圖片的定位都是負值，如圖3所示list.style.left= -600+'px'; //但圖片顯示到五張圖片上的最后一張時，自動跳轉到第一張圖片}else if(newleft>-600){ //當在第一張圖片上單擊向左的按鈕時，自動跳轉到最后一張list.style.left= -3000+'px';}else{list.style.left=newleft+'px';}}

prev.onclick=function(){ //向左的單擊事件animate(600);}next.onclick=function(){ //向右的單擊事件animate(-600)}var timer;function play(){timer=setInterval(function(){ //設置間歇調用，時間間隔為1500毫秒next.onclick() //此處是自動向右切換，如果想設置為向左切換，把next換為prev即可},1500)}play(); //實現自動調用var container=document.getElementById('container'); //獲取最外層的容器元素function stop(){ clearInterval(timer);}container.onmouseover=stop; //當鼠標移動到上方時，清除定時器container.onmouseout=play; //當鼠標從容器元素上方移走時，進行自動輪播var buttons=document.getElementById('buttons').getElementsByTagName('span');var index=1;function buttonsShow(){for(var i=0;i<buttons.length;i++){if(buttons[i].className=='on'){ //如果某個span設置了class='on'，那么就將其的class屬性設置為空buttons[i].className='';}}//數組從0開始，故index需要-1buttons[index-1].className='on'; //設置下一個span的class屬性值為'on'，即是高亮顯示}prev.onclick=function(){index-=1;if(index<1){index=5;}buttonsShow();animate(600);}next.onclick=function(){//由于上面定時器的作用，index會一直遞增下去，而元圓點只有5個，因此需要先做出判斷index+=1;if(index>5){index=1;}buttonsShow();animate(-600);}//點擊任意一個小圓點就切換到所對應的圖片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) } }