原生JS例項之輪播圖《由簡單到炫酷》系列二
阿新 • • 發佈：2018-12-16
本文主要講述JavaScript原生輪播圖例項，如需JavaScript基礎請到菜鳥教程自己補習。
目錄結構
目標與思路
本文講述最基礎的版本:
頁面載入完成後自動輪播
實現思路：
思路：
1、獲取圖片標籤
2、通過改變圖片路徑改變圖片內容
3、點選事件呼叫changeImgs函式
4、實現無縫輪播
5、計時器函式--自動輪播
專案原始碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript"> /** * 目標：無需點選圖片自動輪播 * 思路：1、獲取圖片標籤 * 2、通過改變圖片路徑改變圖片內容 * 3、點選事件呼叫changeImgs函式 * 4、實現無縫輪播 * 5、計時器函式--自動輪播 */ var index = 0; function changeImgs() { //獲得要切換圖片的那個元素 var imgs = document.getElementById("imgs"); //計算出當前要切換到第幾張圖片 var curIndex = index % 3 + 1; //0,1,2 imgs.src = "../images/ " + curIndex + ".jpeg"; //1,2,3 //每切換完,索引加1 index = index + 1; } //定時器函式 function init() { setInterval("changeImgs()", 1000); } </script> <body onload="init()"> <div style="width: 800px ;height: 400px;border:1px solid black;margin: 0 auto;"> <img src="../images/1.jpeg" width="100%" height="100%" id="imgs"/> </div> </body> </html>
執行結果
大家自行執行測試，專案所需的圖片檔案，我放在下面的連結中。
連結:https://pan.baidu.com/s/1W7GWsdPz0C3Z8aFKuSvprg 密碼:05fy
Web全棧技術交流
點選連結加入群聊【Web全棧交流群】：https://jq.qq.com/?_wv=1027&k=5rnUzsF
