圖片輪播的實現（html js）
阿新 • • 發佈：2018-11-05
1.簡單實現
1）實現思想：通過輪播次數來決定顯示那一張首先，可以用簡單的div 包含img的框架來實現，我們為他新增按鈕，每個按鈕對應不同的圖片，那麼，每點選一次，將要顯示的圖片的style.dispay屬性設定為'block'將不顯示的圖片的display設定為none，可以實現簡單的按鈕點選實現輪播，再者，我們可以利用間歇呼叫setInterval()方法來實現自動輪播
2）演算法的實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> div{ height:100px; } div >img{ width:500px; height:500px; display: block; } </style> <body> <button>顯示1</button> <button>顯示2</button> <button>顯示3</button> <button>顯示4</button> <div> <img src="../iamges/1.jpg" alt=""> <img src="../iamges/1.jpg" alt=""> <img src="../iamges/1.jpg" alt=""> <img src="../iamges/1.jpg" alt=""> <img src="../iamges/1.jpg" alt=""> </div> </body> </html>
如以上程式碼所示，為html的寫法
以下為button繫結事件，js實現輪播
<script> window.onload =function(){ var btns= document.getElementsByTagName('button'); function change(){ for(var i =0 ; i<imgs.length;i++){ imgs[i].style.display ='none'; }img[0].style.display ='block'; } btns[0].onclick =change; } </script>
此為一個點選事件的實現，其他的類似。
當然，實現了點選輪播之後，我們需要為他新增自動輪播，利用setInterval（）方法，
var count=0;
setInterval(function(){
for(var i =0 ; i<imgs.length;i++){
imgs[i].style.display ='none';
}
var index =count%imgs.length;
img[count].style.display ='block';
count++;
},5000);注意，程式碼中宣告index 變數的用意在於，我們發現，第一次迴圈的時候，i==conut，但是，隨著count的遞增，i值沒有與之相對應的，那麼，第二次輪播，將無法實現。所以為count取餘以後，count 0 1 2 3 4 5
index 0 1 2 0 1 2
由此實現簡單的輪播。注：程式碼中丟失對於images元素的獲取，可自行新增。