原生js實現簡單輪播圖效果
阿新 • • 發佈：2018-12-11
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首頁</title> <style> .father{ border: 1px solid #FF0000; margin: auto; width: 500px; } </style> <script> var i=1; function init(){ //定時器 setInterval("changeImg()", 3000); //引數 1,呼叫的方法 2.時間 } function changeImg(){ //圖片數量 if(i==3){ i=0; } i++; document.getElementById("img").src = "../img/"+i+".jpg"; } </script> </head> <body onload="init()"> <div class = "father"> <!--3.輪播圖部分--> <div id=""> <img src="../img/1.jpg" width="100%" id="img"/> </div> </div> </body> </html>