HTML + JavaScriptのシンプルなカルーセルマップ

  • ステップ解析
分析:
    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>

     

          

おすすめ

転載: www.cnblogs.com/liyihua/p/12387573.html