輪播圖是前端最基本、最常見的功能，不論web端還是移動端，大平臺還是小網站，大多在首頁都會放一個輪播圖效果。本教程講解怎麼實現一個簡單的輪播圖效果。學習本教程之前，讀者需要具備html和css技能，同時需要有簡單的javascript基礎。
本例項效果如下圖所示：
根據例項效果，需要的元素有圖片、中間圓點按鈕、左右箭頭按鈕等。實際html程式碼如下所示：
<div class="banner_container" id="bannerContainer"> <div class="img_box"><!--圖片元素--> <div><img src="img/1.jpg" alt=""></div> <div><img src="img/2.jpg" alt=""></div> <div><img src="img/3.jpg" alt=""></div> <div><img src="img/4.jpg" alt=""></div> <div><img src="img/5.jpg" alt=""></div> </div> <ul class="sel_box"><!--選擇按鈕--> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <div class="left_btn btn"></div><!--左切換按鈕--> <div class="right_btn btn"></div><!--右切換按鈕--> </div>
讀者可以根據實際效果自行編寫樣式。
接下來完成javascript部分的程式碼，先分析一下輪播圖的效果所需要的步驟。
1. 獲取輪播圖各個html元素及宣告相關變數。如下所示：
//獲取外包容器 var eContainer = document.getElementById('bannerContainer'); //獲取圖片總容器 var eImgBox = eContainer.getElementsByClassName('img_box')[0]; //獲取圖片容器列表 var aImgList = eImgBox.getElementsByTagName('div'); //獲取選擇按鈕容器 var eSelBox = eContainer.getElementsByClassName('sel_box')[0]; //獲取選擇按鈕 var aSelList = eSelBox.getElementsByTagName('li'); //獲取左按鈕 var eLeftBtn = eContainer.getElementsByClassName('left_btn')[0]; //獲取右按鈕 var eRightBtn = eContainer.getElementsByClassName('right_btn')[0]; //當前圖片索引 var nIndex = 0; //輪播圖自動切換定時器 var timer = null;
2. 設定圖片容器大小及位置
一般輪播圖的數量不是固定的，可能是3個，也可能是5個，所以 “圖片容器的寬度=外包容器寬度 * 輪播圖數量”，程式碼如下：
//獲取外包容器寬度 var nContainerW = eContainer.offsetWidth; //設定圖片總容器寬度 eImgBox.style.width = nContainerW * aImgList.length + 'px';
3. 設定預設顯示圖片及選擇按鈕，本例項第一張圖為預設圖片，程式碼如下：
//預設顯示第一張圖片 eImgBox.style.left = '0px'; //預設第一個選擇按鈕設為當前選擇按鈕 aSelList[0].className = 'cur';
4. 給選擇按鈕繫結輪播圖切換事件，在這裡把點選事件委託給選擇按鈕容器，如下所示：
eSelBox.addEventListener('click',function(event){
//獲取當前點選元素
var eTarget = event.target;
//判斷點選的是li元素，且不是當前選擇按鈕
if(eTarget.nodeName.toLowerCase() == 'li' && eTarget.className != 'cur'){
//設定當前圖片索引
nIndex = eTarget.innerHTML-1
//修改輪播圖容器位置，用於切換圖片
eImgBox.style.left = -nIndex * nContainerW + 'px';
//刪除所有選擇按鈕上的className
for(let i=0;i<aSelList.length;i++){
aSelList[i].className = '';
}
//修改當前選擇按鈕的className，設為當前選擇按鈕
eTarget.className = 'cur';
}
});
輪播圖切換屬於本例項核心功能，在選擇數字按鈕時會切換；點選左、右兩個按鈕時也會切換；圖片還會自動切換。所以可以把切換圖片的功能封裝成一個函式，如下所示：
//輪播圖切換 function fnSwitchImg(){ //修改輪播圖容器位置，用於切換圖片 eImgBox.style.left = -nIndex * nContainerW + 'px'; //刪除所有選擇按鈕上的className for(let i=0;i<aSelList.length;i++){ aSelList[i].className = ''; } //修改當前選擇按鈕的className，設為當前選擇按鈕 aSelList[nIndex].className = 'cur'; }
那麼第 4 步的程式碼修改如下：
//選擇按鈕繫結事件 eSelBox.addEventListener('click',function(event){ //獲取當前點選元素 var eTarget = event.target; //判斷點選的是li元素，且不是當前選擇按鈕 if(eTarget.nodeName.toLowerCase() == 'li' && eTarget.className != 'cur'){ //設定當前圖片索引 nIndex = eTarget.innerHTML-1 fnSwitchImg(); } });
5. 點選左、右兩個按鈕也是可以切換圖片的，分別新增事件，程式碼如下：
eLeftBtn.onclick = function(){ if(nIndex<=0){ return; //如果當前是第一張圖片，阻止後續程式碼執行 } //往左切換圖片 nIndex --; fnSwitchImg(); } eRightBtn.onclick = function(){ if(nIndex>=aSelList.length-1){ return; //如果當前是最後一張圖片，阻止後續程式碼執行 } //往右切換圖片 nIndex ++; fnSwitchImg(); }
6. 給輪播圖新增自動切換功能
完成這些步驟之後，輪播圖已能正常執行，不過大部分輪播圖都是可以自動切換的。所以還需要加上一個定時器功能，設定輪播圖自動切換；當滑鼠移入輪播圖的時候，需要移除定時器；滑鼠移出時再次啟動定時器。如下所示：
//輪播圖自動切換 timer = setInterval(function(){ //向右切換圖片 nIndex ++; //已切換到最後一張圖片時，跳回第一張圖片 if(nIndex>=5){ nIndex = 0; } fnSwitchImg(); },3000); //滑鼠滑入輪播圖停止自動切換 eContainer.onmouseenter = function(){ clearInterval(timer); } //滑鼠移出輪播圖開始自動切換 eContainer.onmouseleave = function(){ //輪播圖自動切換 timer = setInterval(function(){ //向右切換圖片 nIndex ++; //已切換到最後一張圖片時，跳回第一張圖片 if(nIndex>=5){ nIndex = 0; } fnSwitchImg(); },3000); }
本例項圖片切換的動畫效果使用的是css3的過渡動畫，所以需要給相關元素新增transition樣式屬性。