js輪播圖自動播放和手動控制
阿新 • • 發佈：2019-01-24
html檔案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/circle_image.js"></script> </head> <body> <!--輪播圖--> <div id="imageBack"> <img src="../images/1.jpg" id="testImage" style="width: 400px;"> </div> <!--手動控制按鈕--> <div id="buttonBack"> <button id="last" style="width: 200px;height: 40px">上一個</button> <button id="next" style="width: 200px;height: 40px">下一個</button> </div> </body> </html>
js檔案
var currentImage = 1; //從1開始 var imageCount = 5; //圖片總數 window.onload = function () { //手動點選上一張 document.getElementById("last").addEventListener("click", function () { if (currentImage > 1){ currentImage -- ; } else if (currentImage = 1){ currentImage = imageCount; } handChangeImage(); }, false); //手動點選下一張 document.getElementById("next").addEventListener("click", function () { if (currentImage < imageCount){ currentImage ++ ; } else if (currentImage = imageCount){ currentImage = 1; } handChangeImage(); }, false); //2秒後執行 setTimeout(selfChangeImage, 2000); }; //手動控制上一張下一張 function handChangeImage() { var imageObj = document.getElementById("testImage"); imageObj.src = "../images/"+ currentImage +".jpg"; } //自動迴圈 function selfChangeImage() { if (currentImage < imageCount){ currentImage ++ ; } else if (currentImage = imageCount){ currentImage = 1; } var imageObj = document.getElementById("testImage"); imageObj.src = "../images/"+ currentImage +".jpg"; //2秒後執行 setTimeout(selfChangeImage, 2000); }