原生js实现轮播图实例教程
原生js實(shí)現(xiàn)輪播圖實(shí)例教程
本實(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>接下來完成JavaScript部分的代碼，先分析一下輪播圖的效果所需要的步驟。
1、獲取輪播圖各個(gè)html元素及聲明相關(guān)變量。
如下所示：
//獲取外包容器var eContainer = document.getElementById('bannerContainer');//獲取圖片總?cè)萜?/span>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è)萜鲗挾?/span>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)擊事件委托給選擇按鈕容器
如下所示：
eSelBox.addEventListener('click',function(event){//獲取當(dāng)前點(diǎn)擊元素var eTarget = event.target;//判斷點(diǎn)擊的是li元素，且不是當(dāng)前選擇按鈕if(eTarget.nodeName.toLowerCase() == 'li' && eTarget.className != 'cur'){//設(shè)置當(dāng)前圖片索引nIndex = eTarget.innerHTML-1//修改輪播圖容器位置，用于切換圖片eImgBox.style.left = -nIndex * nContainerW + 'px';//刪除所有選擇按鈕上的classNamefor(let i=0;i<aSelList.length;i++){aSelList[i].className = '';}//修改當(dāng)前選擇按鈕的className，設(shè)為當(dāng)前選擇按鈕eTarget.className = 'cur';}});輪播圖切換屬于本實(shí)例核心功能，在選擇數(shù)字按鈕時(shí)會(huì)切換；點(diǎn)擊左、右兩個(gè)按鈕時(shí)也會(huì)切換；圖片還會(huì)自動(dòng)切換。所以可以把切換圖片的功能封裝成一個(gè)函數(shù)，如下所示：
//輪播圖切換function fnSwitchImg(){//修改輪播圖容器位置，用于切換圖片eImgBox.style.left = -nIndex * nContainerW + 'px';//刪除所有選擇按鈕上的classNamefor(let i=0;i<aSelList.length;i++){aSelList[i].className = '';}//修改當(dāng)前選擇按鈕的className，設(shè)為當(dāng)前選擇按鈕aSelList[nIndex].className = 'cur';}那么第 4 步的代碼修改如下：
//選擇按鈕綁定事件eSelBox.addEventListener('click',function(event){//獲取當(dāng)前點(diǎn)擊元素var eTarget = event.target;//判斷點(diǎn)擊的是li元素，且不是當(dāng)前選擇按鈕if(eTarget.nodeName.toLowerCase() == 'li' && eTarget.className != 'cur'){//設(shè)置當(dāng)前圖片索引nIndex = eTarget.innerHTML-1fnSwitchImg();}});5、點(diǎn)擊左、右兩個(gè)按鈕也是可以切換圖片的，分別添加事件
代碼如下：
eLeftBtn.onclick = function(){if(nIndex<=0){return; //如果當(dāng)前是第一張圖片，阻止后續(xù)代碼執(zhí)行}//往左切換圖片nIndex --;fnSwitchImg();}eRightBtn.onclick = function(){if(nIndex>=aSelList.length-1){return; //如果當(dāng)前是最后一張圖片，阻止后續(xù)代碼執(zhí)行}//往右切換圖片nIndex ++;fnSwitchImg();}6、給輪播圖添加自動(dòng)切換功能
完成這些步驟之后，輪播圖已能正常運(yùn)行，不過大部分輪播圖都是可以自動(dòng)切換的。所以還需要加上一個(gè)定時(shí)器功能，設(shè)置輪播圖自動(dòng)切換；當(dāng)鼠標(biāo)移入輪播圖的時(shí)候，需要移除定時(shí)器；鼠標(biāo)移出時(shí)再次啟動(dòng)定時(shí)器。如下所示：
//輪播圖自動(dòng)切換timer = setInterval(function(){//向右切換圖片nIndex ++;//已切換到最后一張圖片時(shí)，跳回第一張圖片if(nIndex>=5){nIndex = 0;}fnSwitchImg();},3000);//鼠標(biāo)滑入輪播圖停止自動(dòng)切換eContainer.onmouseenter = function(){clearInterval(timer);}//鼠標(biāo)移出輪播圖開始自動(dòng)切換eContainer.onmouseleave = function(){//輪播圖自動(dòng)切換timer = setInterval(function(){//向右切換圖片nIndex ++;//已切換到最后一張圖片時(shí)，跳回第一張圖片if(nIndex>=5){nIndex = 0;}fnSwitchImg();},3000);}本實(shí)例圖片切換的動(dòng)畫效果使用的是css3的過渡動(dòng)畫，所以需要給相關(guān)元素添加transition樣式屬性。
總結(jié)
以上是生活随笔為你收集整理的原生js实现轮播图实例教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 5个很常用的CSS3网页小实例
- 下一篇： css3动画-animation