原生js實現輪播圖實例教程

本實例效果如下圖所示：

根據實例效果，需要的元素有圖片、中間圓點按鈕、左右箭頭按鈕等。實際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';//刪除所有選擇按鈕上的classNamefor(let i=0;i<aSelList.length;i++){aSelList[i].className = '';}//修改當前選擇按鈕的className，設為當前選擇按鈕eTarget.className = 'cur';}});

輪播圖切換屬于本實例核心功能，在選擇數字按鈕時會切換；點擊左、右兩個按鈕時也會切換；圖片還會自動切換。所以可以把切換圖片的功能封裝成一個函數，如下所示：

//輪播圖切換function fnSwitchImg(){//修改輪播圖容器位置，用于切換圖片eImgBox.style.left = -nIndex * nContainerW + 'px';//刪除所有選擇按鈕上的classNamefor(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-1fnSwitchImg();}});

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樣式屬性。

總結

以上是生活随笔為你收集整理的原生js实现轮播图实例教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。