輪播圖是前端最基本、最常見的功能，不論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樣式屬性，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/251582.html
標籤：其他
下一篇：養成編碼習慣