在學習輪播圖之前，要先會切換圖片： 找三張圖片，命名1.jpg,2.jpg,3.jpg 示例： 上面代碼是通過按鈕切換圖片 輪播圖自動切換圖片，用到onload事件 JS代碼： HTML代碼： 這裡要註意：onload寫在body標簽中 每一秒自動切換一張圖片 ...
在學習輪播圖之前，要先會切換圖片：
找三張圖片，命名1.jpg,2.jpg,3.jpg
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>切換圖片</title> <style> div { border: 1px solid white; width: 500px; height: 350px; margin: auto; text-align: center; } </style> <script> var i = 1; function changeImg() { i++; document.getElementById("img1").src = "./img/" + i + ".jpg"; if(i == 3) { i = 0; } } </script> </head> <body> <div> <input type="button" value="下一張" onclick="changeImg()" /> <img src="./img/1.jpg" width="100%" height="100%" id="img1" /> </div> </body> </html>
上面代碼是通過按鈕切換圖片
輪播圖自動切換圖片，用到onload事件
JS代碼：
function init(){ //書寫輪圖片顯示的定時操作 setInterval("changeImg()",3000); } //函數 var i=0 function changeImg(){ i++; //獲取圖片位置並設置src屬性值 document.getElementById("img1").src="./img/"+i+".jpg"; if(i==3){ i=0; } }
HTML代碼：
這裡要註意：onload寫在body標簽中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div { border: 1px solid white; width: 500px; height: 350px; margin: auto; text-align: center; } </style> <script> function init(){ //書寫輪圖片顯示的定時操作 window.setInterval("changeImg()",1000); } var i=0 function changeImg(){ i++; //獲取圖片位置並設置src屬性值 document.getElementById("img1").src="./img/"+i+".jpg"; if(i==3){ i=0; } } </script> </head> <body onload="init()"> <div> <input type="button" value="下一張" onclick="changeImg()" /> <img src="./img/1.jpg" width="100%" height="100%" id="img1" /> </div> </body> </html>
每一秒自動切換一張圖片
