原生js實現輪播圖的實例分析

這篇文章將為大家詳細講解有關原生js實現輪播圖的實例分析，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

輪播圖是前端最基本、最常見的功能，不論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. 給選擇按鈕綁定輪播圖切換事件，在這里把點擊事件委托給選擇按鈕

關于原生js實現輪播圖的實例分析就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。