利用js來實現輪播圖
由於現在很多網站都有輪播圖的存在，所以自己的學著來搗鼓一下下，內容有點長！
（1）、首先要先製作好html頁面，利用div盒子來佈局
<div id="box" class="all">
<div class="screen">
<ul>
<li><img src="images/wf1.jpg" width="500" height="200" alt="1"></li>
<li><img src="images/wf2.jpg" width="500" height="200" alt="2"></li>
<li><img src="images/wf3.jpg" width="500" height="200" alt="3"></li>
<li><img src="images/wf4.jpg" width="500" height="200" alt="4"></li>
<li><img src="images/wf5.jpg" width="500" height="200" alt="5"></li>
</ul>
<ol></ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
首先先一個大的div盒子，然後它裡面有兩個子元素也是div，第一個div裡面放著無序列表ul和有序的列表ol，而ul裡面有五個li且每一個li裡面都包含著img標籤。而ol標籤則是存放著序號，它的裡面的li標籤則是根據img標籤的個數來建立多少個li標籤。
1. 樣式的設定
（1）、 利用css樣式來修飾網頁。首先先取消網頁的原來樣式，然後設定最外層的大盒子div的樣式，寬度設定為500px，高度設定為200px，設定內邊距，設定盒子的邊框，最重要的是要記的脫離文件流，盒子的定位position。在設定它的第一個子元素的樣式，寬度和高度均和父元素的一樣，還要設定裡面元素超出這個寬、高度範圍的處理，選擇隱藏處理，且定位也得設定等等。（這裡就不在說了，後面有程式碼貼上[認真臉]）
2. Js技術的實現
（1）、獲取需要的元素
比如最外層的div盒子、父元素的兩個子元素div、第一個子元素的裡面ul標籤、ul標籤裡面的li標籤、li標籤的img元素、第二個子元素的div、以及這裡面的向左、向右的標籤。
（2）、動態生成序號
在ol標籤裡面動態生成li標籤，並設定li標籤裡面的innerText值（不考慮相容性），這裡面的值就是序號，然後獲取圖片的個數遍歷用來設定li標籤的值即序號，並且在這中間註冊點選事件，當點選到哪個序號，圖片就會以動畫的形式移動該位置（動畫的函式瘋轉起來）。在建立li的過程中我們需要給li物件設定屬性index，用來記錄自己的索引值，以便後面的操作能夠有所方便，預設第一張的圖片的序號高亮顯示，由於點選事件是在動態建立li的過程註冊的，所以我們單獨的把這個事件抽出來封裝成一個函式。
（3）、顯示下一張/上一張的箭頭
當滑鼠的移動最外層的div上的時候就顯示兩個箭頭，設定樣式的display為block；當滑鼠離開的時候就隱藏這兩個箭頭，設定樣式的display為none。
（4）、點選下一張的箭頭切換圖片
定義一個變數index=0，需要給下一張的箭頭註冊點選事件（每點選一次index的值就加一），先實現一張張的圖片切換不考慮當切換到最後一張的時候，再點選箭頭的操作（先實現簡單的操作），這裡的一張張圖片的切換其實就是圖片以動畫的形式移動到指定的位置，我們使用移動的函式來實現切換，這樣就能實現了操作。當需要考慮剛剛說的情況的時候，我們就複製了第一張的圖片，並且放在ul中。然後進行接下來的下一張圖片的操作，首先判斷index是否等於了圖片的個數count（為5）了，相等了就是到了圖片的最後一張了即克隆的那一張圖片，然後我麼偷偷的把index設定為0且設定樣式left為0，就是回到了第一張圖片那裡。判斷完之後就進行了index++,再判斷index是否小於count，小於進行 ol.children[index].click()，相當於當前的序號被人點選了，實現高亮顯示。else呢，以動畫的方式切換圖片並迴圈遍歷取消所有的序號高亮顯示，後設置當前的index所在的序號高亮顯示。
上一張的切換：先判斷是否是第一張圖片，是的話就進行設定index=count（到最後一張的克隆照片上去）且修改樣式的left為最後一張的克隆照片位置。再接下來index減一，ol.children[index].click()，相當於該序號被人點選了。
（5）、自動播放圖片
利用定時器setInterval()來實現var time=setInterval(function(){
arrRight.click();
},interval)；
當自動播放圖片的時候，滑鼠移到最外層的盒子上時，需要停止定時器clearInterval(time)，離開的時候需要開啟定時器。所以應該在（3）那裡加進去。
感謝dalao的耐心觀看，有點多，望海涵！
html程式碼:
<!DOCTYPE html>
<html>
<head>
<title>輪播圖</title>
<meta charset="utf-8">
</head>
<body>
<div id="box" class="all">
<div class="screen">
<ul>
<li><img src="images/wf1.jpg" width="500" height="200" alt="1"></li>
<li><img src="images/wf2.jpg" width="500" height="200" alt="2"></li>
<li><img src="images/wf3.jpg" width="500" height="200" alt="3"></li>
<li><img src="images/wf4.jpg" width="500" height="200" alt="4"></li>
<li><img src="images/wf5.jpg" width="500" height="200" alt="5"></li>
</ul>
<ol></ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
</body>
</html>css程式碼:
*{
margin:0;
padding:0;
list-style: none;
border:0;
}
.all{
width:500px;
height:200px;
padding:7px;
border:2px solid #ccc;
margin:150px auto;
position:relative;
}
.screen{
width:500px;
height:200px;
overflow: hidden;
position:relative;
}
.screen li{
width:500px;
height:200px;
overflow: hidden;
float: left;
}
.screen ul{
left:0;
top:0;
/*六張圖片500px一張*/
width:3000px;
/*記得脫離文件流*/
position: absolute;
}
.all ol{
/*序號的樣式*/
right:10px;
bottom:10px;
line-height: 20px;
text-align:center;
position:absolute;
}
.all ol li{
width:20px;
height:20px;
background: #fff;
border:1px solid #ccc;
margin-left:10px;
cursor: pointer;
float: left;
}
.all ol li.current{
background:yellow;
}
#arr{
display: none;
z-index: 1000;
}
#arr span{
width: 40px;
height:40px;
position: absolute;
left: 5px;
top:50%;
margin-top:-20px;
background:#000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑體';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}js程式碼:
<script type="text/javascript">
//先獲取元素
var box=document.getElementById('box');
var screen=box.children[0];
var ul=screen.children[0];
var ol=screen.children[1];
//獲取箭頭
var arr=box.children[1];
var arrLeft=arr.children[0];
var arrRight=arr.children[1];
//動態生成序號
//獲取圖片的個數
var count=ul.children.length;
//獲取圖片的大小
var imgWidth=screen.offsetWidth;
//設定定時器的時間間隔（為了好維護才這樣寫的）
var interval=5000;
var i=0;
for(;i<count;i++){
//建立序號
var li=document.createElement('li');
// 往ol中新增li並且設定li的值不考慮相容性問題
ol.appendChild(li);
li.innerText=i+1;
//3-看可以通過點選序號顯示對應的圖片
//li記錄自己的索引值 給li物件新增屬性，該標籤不能訪問到的
li.index=i;
//3.1給li註冊點選事件
li.onclick=liClick;
//讓第一個序號預設選中
if(i===0){
li.className='current';
}
}
//點選函式
function liClick(){
//讓圖片以動畫的形式移動
anint(ul,-this.index * imgWidth);
//取消所有li的高粱顯示，讓當前的li高粱顯示
for(i=0;i<count;i++){
li=ol.children[i];
li.className='';
}
this.className='current';
//點選序號li，重新記錄全域性的index
index=this.index;
}
//滑鼠經過顯示箭頭
box.onmouseover=function(){
arr.style.display='block';
clearInterval(time);
}
box.onmouseout=function(){
arr.style.display='none';
//滑鼠離開的時候開啟定時器
time=setInterval(function(){
arrRight.click();
},interval)
}
//滑鼠點在箭頭切換圖片
//實現箭頭上一張和下一張的功能
var index=0;
//4.1下一張的切換
arrRight.onclick=function(){
//看克隆第一張圖片用於最後照片的切換的時候切換到第一張
if(index===count){//當切換到最後一張的圖片的時候
//偷偷修索引值 且切換回第一張
index=0;
ul.style.left='0px';
}
index++;
if(index<count){
// anint(ul,-index*imgWidth);
//讓對應的序號高亮顯示（就是當前的序號被點選了一次）
ol.children[index].click();
}else{
//以動畫的方式切換到克隆的第一張圖片
anint(ul,-index*imgWidth);
//取消所有的序號li的高亮顯示
for(i=0;i<count;i++){
li=ol.children[i];
li.className='';
}
//第一張的li高亮顯示
ol.children[0].className='current';
}
}
//上一張的切換
arrLeft.onclick=function(){
//當是第一張圖片的時候，就偷偷的切換到克隆的那張圖片上去
if(index===0){
index=count;//最後一張圖片
ul.style.left=-index*imgWidth+'px';
}
index--;
if(index>=0){
ol.children[index].click();
}
}
//無縫滾動
//複製第一個li，並且新增到ul的後面
var cloneLi=ul.children[0].cloneNode(true);
ul.appendChild(cloneLi);
//自動顯示圖片
//圖片移動的函式(element要移動的元素 target 移動到的位置 callback回撥函式)
function anint(element,target,callback){
if(element.time){
//解決多次點選是的盒子快速移動的問題
clearInterval(element.time);
}
element.time=setInterval(function(){
var step=5;
var current=element.offsetLeft;
// var target=target;
if(current>target){
step=-Math.abs(step);
}
if(Math.abs(current-target)<=Math.abs(step)){
element.style.left=target+'px';
clearInterval(element.time);
if(callback){//使用回撥函式
callback();
}
return;
}
current+=step;
element.style.left=current+'px';
},20);
}
var time=setInterval(function(){
arrRight.click();
},interval)
</script>