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