要實現如下圖的效果
點擊可以選擇圖片；不點擊的時候自動輪播；並且點擊完后再次自動輪播。
思路：如同在房子里透過窗子看路過的火車一樣，窗子是不動的，但火車是陸續經過窗子的，所以透過窗子可以看到依次看完所有的火車。
1. 讓將圖片排成一列“火車”：ul中li（li中放着輪播圖片）漂浮起來后，就排列成一溜了
2. 要有一個“窗口”，把“火車”放到“窗口”里：設置div的固定長度，使它寬度等於ul中一個li的寬度
3. 讓“火車”動起來：利用margin-left樣式可以選擇要在“窗口”顯示的圖片。
代碼如下：
<!DOCTYPE html> <html> <head> <title>圖片輪播效果</title> <link rel="stylesheet" type="text/css" href="./css/reset.css" /> <style> .container{ width:100%; margin:0 auto; } /* 輪播容器 */ .img_wrap{ width:440px; height:440px; margin:0 auto; position:relative; } .img_wrap ul li{ float:left; } /* 輪播索引 */ .img_wrap .img_index{ position:absolute; right:20px; bottom:20px; } .img_wrap .img_index ul li{ width:16px; height:16px; background:gray; border-radius:8px; cursor:pointer; margin-right:4px; } .img_wrap .img_index ul li.on{ background:#fd4b4b; } /* 輪播圖片容器 */ .img_wrap .img_lunbo{ width:440px; height:440px; overflow:hidden; } </style> <script> window.onload = function(){ var currentIndex = 1; //當前索引 var time = 2000; //時間間隔 var length = 5; //幾個索引 var timer = null; //定時器 indexBindClick(); //自動輪播 autoPlay(); //給索引綁定事件 function indexBindClick(){ var lis = document.getElementsByClassName("img_index")[0].getElementsByTagName("li"); for(var i=0; i<lis.length; i++){ lis[i].onclick = function(){ //換圖片顯示 currentIndex = getIndex(this); clearInterval(timer); showImg(); autoPlay(); }; } } function autoPlay(){ timer = setInterval(function(){ showImg(); currentIndex++; },time); } //顯示圖片 function showImg(){ if(currentIndex >= 5){ currentIndex = 0; } //改變小圖標樣式 var lis = document.getElementsByClassName("img_index")[0].getElementsByTagName("li"); for(var j=0; j<lis.length; j++){ lis[j].className = ""; } lis[currentIndex].className = "on"; //顯示當前圖片 var ul = document.getElementsByClassName("img_lunbo")[0].getElementsByTagName("ul")[0]; var li_width = ul.getElementsByTagName("li")[0].scrollWidth; var marginLeft = -currentIndex * li_width; ul.style.marginLeft = marginLeft + "px"; } /* 獲取對象在父節點中索引 */ function getIndex(obj){ var children = obj.parentNode.children; for(var i=0; i<children.length; i++){ if(children[i] == obj){ return i; } } } }; </script> </head> <body> <div class="container"> <div class="img_wrap"> <div class="img_index"> <ul> <li class="on"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="img_lunbo"> <ul> <li><img src="./images/lunbo1.jpg" /></li> <li><img src="./images/lunbo2.jpg" /></li> <li><img src="./images/lunbo3.jpg" /></li> <li><img src="./images/lunbo4.jpg" /></li> <li><img src="./images/lunbo5.jpg" /></li> </ul> </div> </div> </div> </body> </html>
reset.css初始化代碼和圖片要自己准備。