原生JS做圖片輪播（自動或手動）
阿新 • • 發佈：2019-01-06
前言
前端基本上靠用現成的封裝好的控制元件的我，今天也算是自己改了一回程式碼，也自己寫了寫原生JS，改了一下響應程式碼。需求是這樣的，頁面的記錄中有多個附件，如果附件是圖片的話，檢視圖片時要多張圖片進行輪播，實際需求是不能自動，要手動控制圖片切換。說起來也不難，用外掛就好了，但是查了好多外掛都用到了jquery.min.js，但是這個js檔案和專案中用的EasyUI引用的js檔案衝突了，解決衝突沒成功，所以改方案了，換成原生JS寫了，發現還是原生JS好理解。
輪播原理
先看一下我們需要的效果：
下面就是圖片輪播的原理，原理並不難，實現起來有點麻煩，不過細心點還是很好玩的。
1、設定li放需要輪播的圖片
2、設定li放輪播圖片的縮圖
3、設定圖片自動輪播
4、設定縮圖的onmouseover事件切換圖片
程式碼展示
這是在網上找了一個實現的程式碼，然後改成了想要的樣式。其實在html中，我們的需求是動態讀取附件圖片，然後載入到頁面上，所以html中的li都是js拼接完成後放到頁面上的。<head> <meta charset="UTF-8"> <title>圖片左右輪播</title> <style> body, div, ul, li { margin: 0; padding: 0; } ul { list-style-type: none; } body { background: #000; text-align: center; font: 12px/20px Arial; } #box { position: relative; width: 600px; height: 300px; background: #fff; border-radius: 5px; border: 8px solid #fff; margin: 10px auto; } #box .list { position: relative; width: 600px; height: 300px; overflow: hidden; border: 1px solid #ccc; } #box .list li { position: absolute; top: 0; left: 0; width: 490px; height: 170px; opacity: 0; transition: opacity 0.5s linear } #box .list li.current { opacity: 1; } #box1 .count { position: relative; right: 0; left:500; bottom: 5px; } #box1 .count li { color: #fff; float: left; width: 50px; height: 50px; cursor: pointer; margin-right: 5px; overflow: hidden; background: #F90; opacity: 0.5; } #box1 .count li.current { color: #fff; opacity: 1; font-weight: 700; background: #f60 } </style> </head> <body> <div id="box"> <ul class="list"> <li class="current" style="opacity: 1;"><img src="img/1.jpg" width="600" height="300"></li> <li style="opacity: 0;"><img src="img/2.jpg" width="600" height="300"></li> <li style="opacity: 0;"><img src="img/3.jpg" width="600" height="300"></li> <li style="opacity: 0;"><img src="img/4.jpg" width="600" height="300"></li> <li style="opacity: 0;"><img src="img/5.jpg" width="600" height="300"></li> <li style="opacity: 0;"><img src="img/6.jpg" width="600" height="300"></li> </ul> </div> <div id="box1"> <ul class="count"> <li class="current"><img src="img/1.jpg" width="50" height="50"></li> <li class=""><img src="img/2.jpg" width="50" height="50"></li> <li class=""><img src="img/3.jpg" width="50" height="50"></li> <li class=""><img src="img/4.jpg" width="50" height="50"></li> <li class=""><img src="img/5.jpg" width="50" height="50"></li> <li class=""><img src="img/6.jpg" width="50" height="50"></li> </ul> </div> <script> var box=document.getElementById('box'); var uls=document.getElementsByTagName('ul'); var imgs=uls[0].getElementsByTagName('li'); var btn=uls[1].getElementsByTagName('li'); var i=index=0; //中間量，統一宣告； var play=null; console.log(box,uls,imgs,btn);//獲取正確 //圖片切換, 淡入淡出效果（transition: opacity 0.8s linear）做的 function show(a){ //方法定義的是當傳入一個下標時，按鈕和圖片做出對的反應 for(i=0;i<btn.length;i++ ){ btn[i].className=''; //每個縮圖都先設定成看不見，然後把當前縮圖設定成可見。 btn[a].className='current'; } for(i=0;i<imgs.length;i++){ //把圖片的效果設定和縮圖片相同 imgs[i].style.opacity=0; imgs[a].style.opacity=1; } } //切換按鈕功能，響應對應圖片 for(i=0;i<btn.length;i++){ btn[i].index=i; btn[i].onmouseover=function(){ show(this.index); clearInterval(play); } } //自動輪播方法 function autoPlay(){ play=setInterval(function(){ //這個paly是為了儲存定時器的，變數必須在全域性宣告 index++; index>=imgs.length&&(index=0);//可能有優先順序問題，所以用了括號 show(index); },1000) } autoPlay();//呼叫自動輪播的方法 //div的滑鼠移入移出事件 box.onmouseover=function(){ clearInterval(play); }; box.onmouseout=function(){ autoPlay(); }; </script> </body> </html>
另外，需要注意一個點，就是切換縮圖時，需要切換圖片。
//切換按鈕功能，響應對應圖片
for(i=0;i<btn.length;i++){
btn[i].index=i;
btn[i].onmouseover=function(){
show(this.index);
clearInterval(play);
}
}
總結
其實這個輪播還是特別簡單的，上網查資料的時候，有好多外掛做的效果都特別炫，因為需求簡單，所以選擇了一個簡單的。在實現過程中，因為前臺的薄弱，那些封裝好的外掛自己除錯不了，js衝突了之後，用的noConflict方法解決，沒有成功，只好選用原生的JS，感覺原生的JS還是比較熟悉的。在專案中還有一個需求是，點選某個圖片時，圖片輪播預設它為第一個圖片，只需要知道點選的li的index，然後設定顯示圖片的相同index的li透明度為1就好了。