<div id="container">
<div id="list" style="left: -600px;"> //設(shè)置圖像的父級(jí)元素定位為向左600px，即是左移一個(gè)圖片的寬度
<img src="images/16.jpg" alt="1"> //設(shè)置的是5張圖片自動(dòng)輪播，此處會(huì)有7張圖片，并且紅色代碼表示的圖片和 <img src="images/12.jpg" alt="1">  藍(lán)色代碼表示的圖片是相同的。這是因?yàn)槊繌垐D片都有向前和向后兩種單擊
<img src="images/13.jpg" alt="2">  事件，要使第一張圖片向前單擊顯示第五張圖片，就需要在其前方添加第五
<img src="images/14.jpg" alt="3">  張圖片，避免在第一張圖片單擊向左時(shí)顯示空白；同理，在第五張圖片之
<img src="images/15.jpg" alt="4">  后也要添加第一張圖片，使其實(shí)現(xiàn)平穩(wěn)過渡
<img src="images/16.jpg" alt="5">
<img src="images/12.jpg" alt="5">
</div>
<div id="buttons"> //設(shè)置相對(duì)應(yīng)的按鈕，并未按鈕添加對(duì)應(yīng)的自定義屬性 index
<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="#" rel="external nofollow" rel="external nofollow" id="prev" class="arrow">&lt;</a> //此處的a表示的是箭頭；&lt;(左箭頭)，&gt;(右箭頭)
<a href="#" rel="external nofollow" rel="external nofollow" id="next" class="arrow">&gt;</a>
</div>

*{margin: 0;padding: 0;text-decoration: none;} //設(shè)置所有元素的基本樣式

body{padding: 20px;}
#container{
position: relative; //設(shè)置最外層的div元素的定位為相對(duì)定位，即是相對(duì)與未設(shè)置定位之前的位置進(jìn)行定位
width: 600px;
height: 400px;
border: 3px solid #333;
overflow: hidden; //設(shè)置容器的寬高，并將溢出部分設(shè)置為隱藏
}
#list{
position: absolute; //設(shè)置圖片所在的父級(jí)div的定位為絕對(duì)定位，即是相對(duì)于已定位的父級(jí)元素進(jìn)行定位
z-index: 1; //設(shè)置該div的顯示層次
width: 4200px; //該div是所有圖片的父級(jí)元素，因此其寬高的設(shè)置應(yīng)該包含所有的圖片
height: 400px;
}
#list img{
float: left; //設(shè)置圖片的顯示的顯示方式，為向左浮動(dòng)
width: 600px;
height: 400px;
}
#buttons{
position: absolute; //設(shè)置屏幕下方的所有圓點(diǎn)的定位方式，相對(duì)于容器元素進(jìn)行絕對(duì)定位
left: 250px; //距離父級(jí)已進(jìn)行定位的元素的左側(cè)距離為250px
bottom: 20px;
z-index: 2; //設(shè)置圓點(diǎn)的顯示層級(jí)為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%，即是設(shè)置為圓點(diǎn)顯示
background: #333;
cursor: pointer;
}
#buttons .on{
background: orangered;
}
.arrow{
position: absolute; //設(shè)置按鈕的定位方式，即是相對(duì)與容器元素進(jìn)行絕對(duì)定位
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'); //獲取圖片元素的父級(jí)元素，并命名為list
var prev=document.getElementById('prev'); //獲取左箭頭
var next=document.getElementById('next'); //獲取右箭頭

function animate(offset){ //設(shè)置一個(gè)名為animate的函數(shù)，該函數(shù)接收一個(gè)參數(shù)

var newleft=parseInt(list.style.left)+offset; //獲取圖片的父級(jí)元素的左側(cè)的定位值，并加上傳入的參數(shù)offset

if(newleft<-3000){ //圖片的父級(jí)div在移動(dòng)的過程中，顯示的圖片的定位都是負(fù)值，如圖3所示

list.style.left= -600+'px'; //但圖片顯示到五張圖片上的最后一張時(shí)，自動(dòng)跳轉(zhuǎn)到第一張圖片
}else if(newleft>-600){ //當(dāng)在第一張圖片上單擊向左的按鈕時(shí)，自動(dòng)跳轉(zhuǎn)到最后一張
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(){ //設(shè)置間歇調(diào)用，時(shí)間間隔為1500毫秒
next.onclick() //此處是自動(dòng)向右切換，如果想設(shè)置為向左切換，把next換為prev即可
},1500)
}
play(); //實(shí)現(xiàn)自動(dòng)調(diào)用


var container=document.getElementById('container'); //獲取最外層的容器元素
function stop(){ 
clearInterval(timer);
}
container.onmouseover=stop; //當(dāng)鼠標(biāo)移動(dòng)到上方時(shí)，清除定時(shí)器
container.onmouseout=play; //當(dāng)鼠標(biāo)從容器元素上方移走時(shí)，進(jìn)行自動(dòng)輪播


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'){ //如果某個(gè)span設(shè)置了class='on'，那么就將其的class屬性設(shè)置為空
buttons[i].className='';
}
}
//數(shù)組從0開始，故index需要-1
buttons[index-1].className='on'; //設(shè)置下一個(gè)span的class屬性值為'on'，即是高亮顯示
}


prev.onclick=function(){
index-=1;
if(index<1){
index=5;
}
buttonsShow();
animate(600);
}
next.onclick=function(){
//由于上面定時(shí)器的作用，index會(huì)一直遞增下去，而元圓點(diǎn)只有5個(gè)，因此需要先做出判斷
index+=1;
if(index>5){
index=1;
}
buttonsShow();
animate(-600);
}


//點(diǎn)擊任意一個(gè)小圓點(diǎn)就切換到所對(duì)應(yīng)的圖片
for(var i=0;i<buttons.length;i++){

(function(i){ //使用立即執(zhí)行函數(shù)
buttons[i].onclick=function(){
var clickIndex=parseInt(this.getAttribute('index'));
var offset=600*(index-clickIndex);
animate(offset); //存放鼠標(biāo)點(diǎn)擊之后的位置，用于小圓點(diǎn)的正常顯示
index=clickIndex;
buttonsShow();
}
})(i) 
} 
}