html + js 簡單實現輪播圖
摘要：
哎，剛剛看到自己昨天寫的如何實現搜尋框獲得了兩個喜歡哎，真的是開心，感謝你們的喜歡。
咳咳，迴歸正題。今天要分享的是如何利用 html + js 實現輪播圖。先來看下效果：
圖一
圖二
當然啦，圖片...
哎，剛剛看到自己昨天寫的如何實現搜尋框獲得了兩個喜歡哎，真的是開心，感謝你們的喜歡。
咳咳，迴歸正題。今天要分享的是如何利用 html + js 實現輪播圖。先來看下效果：
圖一
圖二
當然啦，圖片輪播可不止這點東西，有空再完善啦
實現思路如下：
- 設定所有圖片的 display 屬性為 none
- 設定一個 index 用來標誌獲取到的圖片
- 設定一個定時器，每隔一段時間令 index 自增並將對應的圖片的 display 屬性改為 block
附上程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>輪播圖實現</title> <style type="text/css"> /*標題樣式*/ p{ text-align: center; font-size: 25px; color: cadetblue; font-family: fantasy; } .imgBox{ border-top: 2px solid cadetblue; width: 50%; height: 500px; margin: 0 auto; } .imgBox img{ width: 60%; height: 300px; margin: 0 auto; padding-top: 30px; } .img1{ display: block; } .img2{ display: none; } .img3{ display: none; } </style> </head> <body> <p>圖片輪播</p> <div class="imgBox"> <img class="img-slide img1" src="images/1.jpg" alt="1"> <img class="img-slide img2" src="images/2.jpg" alt="2"> <img class="img-slide img3" src="images/3.jpg" alt="3"> </div> </body> <script type="text/javascript"> var index=0; //改變圖片 function ChangeImg() { index++; var a=document.getElementsByClassName("img-slide"); if(index>=a.length) index=0; for(var i=0;i<a.length;i++){ a[i].style.display='none'; } a[index].style.display='block'; } //設定定時器，每隔兩秒切換一張圖片 setInterval(ChangeImg,2000); </script> </html>
如果你覺得我寫的還不錯的話，點個贊啦~