本文實例講述了原生JS實現的輪播圖功能。分享給大家供大家參考，具體如下：
一、效果預覽：
由于只能上傳2M以下的圖片，這里只截取了自動切換的效果：
二、編寫語言
HTML、CSS、原生JS
三、編寫思路
（一）HTML部分
1、.slide意為滑槽，里面存放所有圖片；
2、.prev存放向左的箭頭，.next存放向右的箭頭；
3、pointer意為指示器，存放下方的五個切換按鈕，每個切換按鈕用span來表示；
4、.m-view，意為視窗，即每次看到圖片的窗口，它存放以上所有的部件；
（二）CSS部分
1、.m-view設為相對定位，他的后代元素可以以它作為絕對定位的參照；
2、.slide、.prev、.next、pointer全都用絕對定位放到合適位置；
3、.slide的所有圖片水平排列，且視窗.m-view的寬度設為只有一張圖片那么寬，這樣默認情況.slide還是會全部顯示；當給.m-view設置overflow:hidden后子元素超出它的部分就會隱藏，就實現了只顯示一張圖片的效果；
（三）JS部分
1、切換功能：
設置一個切換函數toggle實現左切或者右切一張圖，toggle有兩個子函數leftToggle和rightToggle分別實現向左、向右切換一張圖，將他們分別綁定到.prev和.next按鈕的clik事件；
2、切換功能的淡入動畫效果
只有1的話切換是立即產生的，沒有過渡效果；這里利用定時器和步長將切換功能細化到更小的滑動操作leftStep和rightStep，leftToggle和rightToggle通過多次調用滑動操作來實現一次切換，這樣就會產生動畫效果；
3、跳轉功能
對指示器的每個圓形按鈕綁定跳轉功能，跳轉實際上是將.slide進行移動；
4、自動播放
只需要設置定時器，每隔一定時間執行切換即可；
四、我的代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>輪播圖</title> <style> .m-view,.m-view .slide img{ position: relative;/*作為絕對定位的父元素*/ width: 800px; height: 600px; } .m-view{ overflow: hidden;/*將超出該div的子元素隱藏*/ } .m-view .slide{ position: absolute; width: 8000px; height: 600px; } .m-view .slide img{ margin-right: -5px; } .m-view .prev,.m-view .next{ position: absolute; top: 40%; font: 60px/60px Microsoft YaHei; color: #00BFFF; } .m-view .prev{ left: 10px; } .m-view .next{ right: 10px; } .m-view .pointer{ position: absolute; bottom: 40px; left: 33%; } .m-view .pointer span{ display: inline-block;/*水平排列*/ width: 40px; height: 40px; border-radius: 20px; margin-right: 10px; background-color: #00FF00; } .m-view .pointer .on{/*點亮當前圖片對應的圓圈*/ background-color: #1E90FF; } </style></head><body> <div class="m-view"> <div class="slide" style="left: -800px"> <img src="../lunbo/5.jpg" alt="4"> <img src="../lunbo/1.jpg" alt="0"> <img src="../lunbo/2.jpg" alt="1"> <img src="../lunbo/3.jpg" alt="2"> <img src="../lunbo/4.jpg" alt="3"> <img src="../lunbo/5.jpg" alt="4"> <img src="../lunbo/1.jpg" alt="0"> </div> <div class="prev"><</div> <div class="next">></div> <div class="pointer"> <span class="button on" index="0"></span> <span class="button" index="1"></span> <span class="button" index="2"></span> <span class="button" index="3"></span> <span class="button" index="4"></span> </div> </div> <script type="text/javascript"> var view=document.getElementsByClassName('m-view')[0]; var slide=document.getElementsByClassName('slide')[0]; var prev=document.getElementsByClassName('prev')[0]; var next=document.getElementsByClassName('next')[0]; var button=document.getElementsByClassName('button'); var curIndex=0;//當前圖片的索引位置 var toggled=true;//是否正在切換，true表明切換已完成，此時才能切換 /* Toggle函數實現切換一張圖片的功能 */ function Toggle () { var TIMER=50;//滑動一次所用的時間，它是setInterval的第二個參數 var time=800;//每切換一張圖片總共用的時長 var times=time/TIMER;//每切換一張圖片需滑動的次數 var stepLenth=800/times;//每次滑動的步長 var leftToggle=function () { var t1=times; function leftStep(){ slide.style.left=parseInt(slide.style.left)+stepLenth+"px"; t1--; if (!t1) { clearInterval(interval); curIndex--; if (curIndex<0) { slide.style.left=parseInt(slide.style.left)-4000+"px"; curIndex=4; }; toggled=true; }; }; if (toggled==true) { toggled=false; button[curIndex].className="button"; if (curIndex!=0) { button[curIndex-1].className="button on"; }else{ button[curIndex+4].className="button on"; } var interval=setInterval(leftStep,TIMER); }; }; var rightToggle=function () { var t2=times; function leftStep(){ slide.style.left=parseInt(slide.style.left)-stepLenth+"px"; t2--; if (!t2) { clearInterval(interval); curIndex++; if (curIndex>4) { slide.style.left=parseInt(slide.style.left)+4000+"px"; curIndex=0; }; toggled=true; }; }; if (toggled==true) { toggled=false; button[curIndex].className="button"; if (curIndex!=4) { button[curIndex+1].className="button on"; }else{ button[curIndex-4].className="button on"; }; var interval=setInterval(leftStep,TIMER); }; } this.leftToggle=leftToggle;//輸出對外的接口 this.rightToggle=rightToggle; }; var toggle=new Toggle(); prev.onclick=function () { toggle.leftToggle(); }; next.onclick=function () { toggle.rightToggle(); }; /* 點擊圓圈跳轉功能 */ for (var i = 0; i < button.length; i++) { button[i].onclick=function () { var newIndex=parseInt(this.getAttribute("index")); if (newIndex!=curIndex) { var distance=-800*(newIndex-curIndex); slide.style.left=parseInt(slide.style.left)+distance+"px"; button[curIndex].className="button"; button[newIndex].className="button on"; curIndex=newIndex; }; }; } /* 自動播放功能，鼠標移上去停止播放，移開再次播放 */ var intervalo=setInterval(toggle.rightToggle,3000); view.onmouseover=function () { clearInterval(intervalo); } view.onmouseout=function () { intervalo=setInterval(toggle.rightToggle,3000); } </script></body></html>五、一些總結
1、本次采用了面向對象和封裝的思路，這是因為個人體會到確實面向對象的設計能使代碼編寫思路更加清晰，還能夠免去很多冗余重復的代碼，也嘗試過其他書寫思路，但都會使代碼變得不太直觀；要注意的一點就是封裝后要向外提供接口，且如果是封裝在一個函數中，需要實例化一個對象才能調用；
2、在.slide中設置了一個內聯樣式，這是因為在后面要獲取并改變它的left屬性，如果不采用內聯樣式的方法，將無法設置；因為初始時.style.left只能獲取內聯樣式，即使采用內部樣式和外部樣式也會使得獲取的值為undefined。當然，肯定也可以采用其他方法，但是似乎其他方案都更為復雜一些，沒找到更簡便的方法。
3、在前后各多放置一張圖片的作用：
比如，當前是圖片1，現在向左切換，可以和其他位置一樣先執行統一的左移操作，這時視窗顯示額外放置的圖片5，再將.slide整體左移使真正的圖片5顯示在視窗中，這樣是先出現了動畫效果再“暗中移動”了.slide，就好像沒移動一樣，真正做到了無縫切換，邏輯也很簡單；如果不放置額外的圖片，就需要先將視窗左移，使圖片5顯示在視窗中，這樣動畫效果難以設置。
4、在獲取每個span在它父元素的索引位置時，采用了getAttribute獲取自定義的index屬性的方法，其他方法肯定也有不少，但是肯定不能在循環中把i的值直接當成span的索引位置。
5、在跳轉功能中，如果要跳轉的正是當前的頁面，應該什么也不做，這樣可以優化性能 。
6、在點擊左右箭頭切換時，先判斷上一次動畫是否完成，沒完成就不切換，這樣可以優化性能，否則連續點擊可能導致卡頓、切換效果不佳。
7、代碼似乎還有可以優化的地方；
8、這個只是制作了一個輪播圖，接下來考慮做一個輪播組件，似乎難度要大些，還有3D的輪播效果也想要嘗試下了。
PS：感興趣的朋友還可以將上述代碼中的圖片替換成網絡圖片，再使用如下在線工具在線測試運行效果：
HTML/CSS/JavaScript代碼運行工具
http://tools.VeVB.COm/code/HtmlJsRun
在線HTML/CSS/JavaScript前端代碼調試運行工具
http://tools.VeVB.COm/code/WebCodeRun
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結》、《JavaScript運動效果與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
