- 步驟分析
分析：
1.在頁面上使用img標簽展示圖片
2.定義一個方法，修改圖片對象的src屬性
3.定義一個定時器，每隔3秒調用方法一次。
圖片如下：
banner_1.jpg
banner_2.jpg
banner_3.jpg
- 步驟實現
第一步：在頁面上使用img標簽展示圖片
<img id="img" src="img/banner_1.jpg" width="100%">
第二步：定義一個方法，修改img的src屬性
// 修改圖片src屬性
var number = 1;
function fun(){
number ++ ;
// 判斷number是否大於3
if(number > 3){
number = 1;
}
// 獲取img對象
var img = document.getElementById("img");
img.src = "img/banner_"+number+".jpg";
}
第三步：定義一個定時器，每隔3秒鍾調用這個方法一次
// 定義定時器
setInterval(fun,3000);
-
所有步驟的代碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>輪播圖</title> </head> <body> <img id="img" src="img/banner_1.jpg" width="100%"> <script> // 修改圖片src屬性 var number = 1; function fun(){ number ++ ; // 判斷number是否大於3 if(number > 3){ number = 1; } // 獲取img對象 var img = document.getElementById("img"); img.src = "img/banner_"+number+".jpg"; } // 2.定義定時器 setInterval(fun,3000); </script> </body> </html>