原生js實(shí)現(xiàn)輪播圖的實(shí)例分析

這篇文章將為大家詳細(xì)講解有關(guān)原生js實(shí)現(xiàn)輪播圖的實(shí)例分析，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

輪播圖是前端最基本、最常見的功能，不論web端還是移動(dòng)端，大平臺(tái)還是小網(wǎng)站，大多在首頁都會(huì)放一個(gè)輪播圖效果。下面講解怎么實(shí)現(xiàn)一個(gè)簡(jiǎn)單的輪播圖效果。學(xué)習(xí)本教程之前，讀者需要具備html和css技能，同時(shí)需要有簡(jiǎn)單的javascript基礎(chǔ)。

本實(shí)例效果如下圖所示：

 根據(jù)實(shí)例效果，需要的元素有圖片、中間圓點(diǎn)按鈕、左右箭頭按鈕等。實(shí)際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>

讀者可以根據(jù)實(shí)際效果自行編寫樣式。

接下來完成javascript部分的代碼，先分析一下輪播圖的效果所需要的步驟。

1. 獲取輪播圖各個(gè)html元素及聲明相關(guān)變量。如下所示：

//獲取外包容器 var eContainer = document.getElementById('bannerContainer'); //獲取圖片總?cè)萜?nbsp;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]; //當(dāng)前圖片索引 var nIndex = 0; //輪播圖自動(dòng)切換定時(shí)器 var timer = null;

2. 設(shè)置圖片容器大小及位置
一般輪播圖的數(shù)量不是固定的，可能是3個(gè)，也可能是5個(gè)，所以 “圖片容器的寬度=外包容器寬度 * 輪播圖數(shù)量”，代碼如下：

//獲取外包容器寬度 var nContainerW = eContainer.offsetWidth; //設(shè)置圖片總?cè)萜鲗挾?nbsp;eImgBox.style.width = nContainerW * aImgList.length + 'px';

3. 設(shè)置默認(rèn)顯示圖片及選擇按鈕，本實(shí)例第一張圖為默認(rèn)圖片，代碼如下：

//默認(rèn)顯示第一張圖片 eImgBox.style.left = '0px'; //默認(rèn)第一個(gè)選擇按鈕設(shè)為當(dāng)前選擇按鈕 aSelList[0].className = 'cur';

4. 給選擇按鈕綁定輪播圖切換事件，在這里把點(diǎn)擊事件委托給選擇按鈕

關(guān)于原生js實(shí)現(xiàn)輪播圖的實(shí)例分析就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。