ネイティブJavaScriptカルーセル実装方法

この記事では、JavaScriptカルーセルの実装方法を参考までに紹介します。具体的な内容は次のとおりです。

エフェクトのスクリーンショット:

注: divコンテナのサイズと画像パスは自分で設定でき、 img タグとaタグを追加した後でブラウザが適応します。

写真を保存するための画像フォルダを作成する

HTMLテキストを書く

<本文>
//画像パスは自分で変更できます <div id="outer">
       <ul id="画像リスト">
           <li><img src="image/8.jpg" alt=""></li>
           <li><img src="image/6.jpg" alt=""></li>
           <li><img src="image/7.jpg" alt=""></li>
           <li><img src="image/6.jpg" alt=""></li>
           <li><img src="image/8.jpg" alt=""></li>
           <li><img src="image/7.jpg" alt=""></li>
           <li><img src="image/6.jpg" alt=""></li>
           <li><img src="image/8.jpg" alt=""></li>
       </ul>
       <div id="nav">
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
       </div>
   </div>
</本文>

CSSスタイルを追加する

<スタイル>
* {
   マージン: 0px;
   パディング: 0px;
}

/* 外枠コンテナ */
#外側{
   幅: 1555ピクセル;
   高さ: 600px;
   背景色: #bfa;
   マージン: 100px 自動;
   位置: 相対的;
   /* 隠れる */
   オーバーフロー: 非表示;

}

/* 画像のリスト */
#画像リスト {
   /* フレックスボックスレイアウト */
   ディスプレイ: フレックス;
   リストスタイル: なし;
   位置: 相対的;
   /* レイアウト方向 */
   /* flex-direct5on: 行; */
   /*画像のピクセルを1552ピクセル移動します*/
   /* 右: 1552px; */


}

#画像リスト li {
   マージン: 10px 10px;
}

/* ナビゲーションポイント */
#ナビ{
   ディスプレイ: フレックス;
   リストスタイル: なし;
   位置: 絶対;
   下: 50px;
   /* 1555/2 - 6*(20+25)/2 */
   /* 左: 642px; */

}

#nav {
   幅: 25px;
   高さ: 25px;
   マージン: 0px 10px;
   背景色: rgb(223, 129, 52);
   境界線の半径: 5px;
}

/* マウス移動効果*/
#nav a:hover {
   背景色: rgb(215, 107, 224);
}
</スタイル>

JavaScript による機能の実装

<script type="text/javascript">
    window.onload = 関数（）{

    // 外側のフレームのプロパティを取得します。var outer = document.getElementById("outer");
    // imglist 属性を取得します var imglist = document.getElementById("imglist");
    // img 属性を取得します var imgArr = document.getElementsByTagName("img");

    // a 属性を取得します var allA = document.getElementsByTagName('a');
    //ナビゲーション ポイントを取得します var nav = document.getElementById("nav");
    //ナビゲーション ポイントを中央に設定します。nav.style.left = (outer.offsetWidth / 2) - (allA.length * 45 / 2) + "px";

    //デフォルトの表示インデックス var index = 0;
    allA[インデックス].style.backgroundColor = "rgb(215, 107, 224)";
    // ナビゲーションポイントタイマーを切り替える var timer = setInterval(function () {
        //ループ表示 index = (++index) % allA.length;
        //ナビゲーションポイントの背景色を設定します。 allA[index].style.backgroundColor = "rgb(215, 107, 224)";
        SetA();
        //写真を自動的に切り替えます//写真を変更すると、1 つの写真が 1552 ピクセル左に移動します
        imglist.style.transition = "右 1.5 秒"
        imglist.style.right = (インデックス * 1552) + "px";
       

    }, 1800);

    //ハイパーリンクをクリックすると画像が表示されます for (var i = 0; i < allA.length; i++) {
        //各ハイパーリンクにインデックスを追加します。allA[i].index = i;
        //各ハイパーリンクにクリック応答関数をバインドする allA[i].onclick = function () {

            imgIndex = this.index;
            //ナビゲーション ポイントの現在の位置をオーバーライドします。index = imgIndex;
            SetA();
            //画像を変更し、画像のピクセルを 1552 ピクセル左に移動する
            imglist.style.transition = "右 0.85 秒"
            imglist.style.right = (imgIndex * 1552) + "px";


            //選択したタグを変更します allA[imgIndex].style.backgroundColor = "rgb(215, 107, 224)";
        };
    }
    //関数のスタイルをクリアする SetA() {
        (var i = 0; i < allA.length; i++) の場合 {
            allA[i].style.backgroundColor = "";
        }
        //現在のナビゲーションに allA[index].style.backgroundColor = "rgb(215, 107, 224)" を設定します。
    }
};

</スクリプト>

完全なコード

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>カルーセル画像</title>

    <スタイル>
        * {
            マージン: 0px;
            パディング: 0px;
        }

        /* 外枠コンテナ */
        #外側{
            幅: 1555ピクセル;
            高さ: 600px;
            背景色: #bfa;
            マージン: 100px 自動;
            位置: 相対的;
            /* 隠れる */
            オーバーフロー: 非表示;

        }

        /* 画像のリスト */
        #画像リスト {
            /* フレックスボックスレイアウト */
            ディスプレイ: フレックス;
            リストスタイル: なし;
            位置: 相対的;
            /* レイアウト方向 */
            /* flex-direct5on: 行; */
            /*画像のピクセルを1552ピクセル移動します*/
            /* 右: 1552px; */


        }

        #画像リスト li {
            マージン: 10px 10px;
        }

        /* ナビゲーションポイント */
        #ナビ{
            ディスプレイ: フレックス;
            リストスタイル: なし;
            位置: 絶対;
            下: 50px;
            /* 1555/2 - 6*(20+25)/2 */
            /* 左: 642px; */

        }

        #nav {
            幅: 25px;
            高さ: 25px;
            マージン: 0px 10px;
            背景色: rgb(223, 129, 52);
            境界線の半径: 5px;
        }

        /* マウス移動効果*/
        #nav a:hover {
            背景色: rgb(215, 107, 224);
        }
    </スタイル>
    <script type="text/javascript">
        window.onload = 関数（）{

            // 外側のフレームのプロパティを取得します。var outer = document.getElementById("outer");
            // imglist 属性を取得します var imglist = document.getElementById("imglist");
            // img 属性を取得します var imgArr = document.getElementsByTagName("img");

            // a 属性を取得します var allA = document.getElementsByTagName('a');
            //ナビゲーション ポイントを取得します var nav = document.getElementById("nav");
            //ナビゲーション ポイントを中央に設定します。nav.style.left = (outer.offsetWidth / 2) - (allA.length * 45 / 2) + "px";

            //デフォルトの表示インデックス var index = 0;
            allA[インデックス].style.backgroundColor = "rgb(215, 107, 224)";
            // ナビゲーションポイントタイマーを切り替える var timer = setInterval(function () {
                インデックス = (++index) % allA.length;
                //ナビゲーションポイントの背景色を設定します。 allA[index].style.backgroundColor = "rgb(215, 107, 224)";
                SetA();
                //写真を自動的に切り替えます//写真を変更すると、1 つの写真が 1552 ピクセル左に移動します
                imglist.style.transition = "右 1.5 秒"
                imglist.style.right = (インデックス * 1552) + "px";

                //ループ表示}, 1800);


            //ハイパーリンクをクリックすると画像が表示されます for (var i = 0; i < allA.length; i++) {

                //各ハイパーリンクにインデックスを追加します。allA[i].index = i;
                //各ハイパーリンクにクリック応答関数をバインドする allA[i].onclick = function () {

                    imgIndex = this.index;
                    //ナビゲーション ポイントの現在の位置をオーバーライドします。index = imgIndex;
                    SetA();
                    //画像を変更し、画像のピクセルを 1552 ピクセル左に移動する
                    imglist.style.transition = "右 0.85 秒"
                    imglist.style.right = (imgIndex * 1552) + "px";


                    //選択したタグを変更します allA[imgIndex].style.backgroundColor = "rgb(215, 107, 224)";

                };

            }
            //関数のスタイルをクリアする SetA() {
                (var i = 0; i < allA.length; i++) の場合 {
                    allA[i].style.backgroundColor = "";
                }

                allA[インデックス].style.backgroundColor = "rgb(215, 107, 224)";


            }


        };


    </スクリプト>
</head>

<本文>

    <div id="外側">
        <ul id="画像リスト">
            <li><img src="image/8.jpg" alt=""></li>
            <li><img src="image/6.jpg" alt=""></li>
            <li><img src="image/7.jpg" alt=""></li>
            <li><img src="image/6.jpg" alt=""></li>
            <li><img src="image/8.jpg" alt=""></li>
            <li><img src="image/7.jpg" alt=""></li>
            <li><img src="image/6.jpg" alt=""></li>
            <li><img src="image/8.jpg" alt=""></li>
        </ul>
        <div id="nav">
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
        </div>
    </div>
</本文>
</html>