- ステップ解析
分析:
1.ページ上のimgタグの表示イメージ
オブジェクトのsrc属性の画像を修正する方法を定義します。2.
3.メソッドを呼び出すごとに3秒後に、タイマーを定義します。
次のことを想像し:
banner_1.jpg
banner_2.jpg
banner_3.jpg
- 達成するための手順
最初のステップ:ページ上のimgタグ表示画像を使用します
< IMGのID = "IMG" SRC = "IMG / banner_1.jpg" 幅= "100%" >
ステップ:定義された方法で、IMG src属性を変更
//画像のsrc属性を変更します
VAR数= 1。
関数fun(){
数++;
//数が3より大きいか否かを判断します
IF(数> 3){
数= 1。
}
//オブジェクトのIMGを取得
VAR IMG =のdocument.getElementById( "IMG");
img.src = "IMG /バナー_" +番号+ "JPG"。
}
第三段階:3秒に1回、このメソッドを呼び出して、タイマーを定義します
//タイマーを定義します
setInterval(楽しい、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>