JavaScript でカルーセル効果を実装する

この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

実装コード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }
        ul {
            リストスタイル: なし;
        }
        ＃箱 {
            マージン: 30px 自動;
            幅: 590ピクセル;
            高さ: 340ピクセル;
            位置: 相対的;
        }
 
        #バナーリスト > li {
            位置: 絶対;
            左: 0;
            右: 0;
            不透明度: 0;
            /*トランジションアニメーション*/
            遷移: 不透明度 2 秒、緩和;
        }
 
        #左、#右 {
            幅: 30ピクセル;
            高さ: 60px;
            テキスト配置: 中央;
            行の高さ: 60px;
            フォントサイズ: 24px;
            色: rgba(255,255,255,0.7);
            背景色: rgba(0,0,0,0.3);
            位置: 絶対;
            上位: 50%;
            上マージン: -30px;
            zインデックス: 3;
        }
 
        ＃右 {
            右: 0;
        }
 
        #タグリスト{
            幅: 130ピクセル;
            位置: 絶対;
            左: 50%;
            下: 8px;
            左マージン: -55px;
        }
 
        #タグリスト > li {
            フロート: 左;
            幅: 18px;
            高さ: 18px;
            マージン: 4px;
            テキスト配置: 中央;
            行の高さ: 18px;
            フォントサイズ: 13px;
            背景色: 白;
            境界線の半径: 9px;
            /*トランジションアニメーション*/
            遷移: 背景色 1s イージー;
        }
    </スタイル>
    <スクリプト>
        window.onload = 関数 (){
            //tag_listとサークルリストを取得する
            var tag_list = document.getElementById("タグリスト");
            var list = tag_list.children;
 
            //1. ul(banner_list)とすべてのliを取得する
            バナーリストを document.getElementById("バナーリスト");
            以下のようにbannerLiをbanner_list.childrenとします。
 
            //2. デフォルトで最初のバナーを表示する
            バナーLi[0].className = "現在のバナー"
            バナーLi[0].style.opacity = 1
            list[0].style.backgroundColor = "赤"
 
            //3. インデックスは 0 から始まり、デフォルトでは最初のものが表示されます。
            //count は現在表示されているページのインデックスを示します。let count = 0;
 
            //4. > をクリックして右に切り替えます var right = document.getElementById("right");
            right.onclick = 関数 (){
                //4.1 まず現在のページを非表示にするbannerLi[count].className = ""
                バナーLi[count].style.opacity = 0
                list[count].style.backgroundColor = "白"
 
                //4.2. ページ番号が1ずつ増加し、6ページ目（インデックス=5）に達したら、最初のページ（インデックス=0）に切り替えます。
                (++count == 5)の場合{
                    カウント = 0
                }
 
                //4.3 表示する現在のページ番号を設定するbannerLi[count].className = "current-banner"
                バナーLi[count].style.opacity = 1
                list[count].style.backgroundColor = "赤"
            }
 
            // right と同様に、条件を変更します var left = document.getElementById("left");
            left.onclick = 関数 (){
                //4.1 まず現在のページを非表示にするbannerLi[count].className = ""
                バナーLi[count].style.opacity = 0
                list[count].style.backgroundColor = "白"
 
                //4.2. ページ番号が 1 ずつ減少し、0 ページ目 (インデックス = -1) に達すると、5 ページ目 (インデックス = 4) に切り替わります。
                (--count == -1)の場合{
                    カウント = 4
                }
 
                //4.3 表示する現在のページ番号を設定するbannerLi[count].className = "current-banner"
                バナーLi[count].style.opacity = 1
                list[count].style.backgroundColor = "赤"
            }
 
            //マウスイベントをすべての円にバインドします for (let i = 0; i < list.length; i++) {
                list[i].onmouseenter = 関数 (){
                    // 円のスタイルを設定します list[count].style.backgroundColor = "white"
                    list[i].style.backgroundColor = "赤"
                    //バナー画像のスタイルを設定するbannerLi[count].className = ""
                    バナーLi[count].style.opacity = 0
                    バナーLi[i].className = "現在のバナー"
                    バナーLi[i].style.opacity = 1
                    //count を i に設定する
                    カウント = i
                }
            }
        }
    </スクリプト>
</head>
<本文>
    <div id="ボックス">
        <ul id="バナーリスト">
            <li class="current-banner"><img src="banner-img/11.jpg" alt=""></li>
            <li><img src="banner-img/22.jpg" alt=""></li>
            <li><img src="banner-img/33.jpg" alt=""></li>
            <li><img src="banner-img/44.jpg" alt=""></li>
            <li><img src="banner-img/55.jpg" alt=""></li>
        </ul>
        <span id="left">&lt;</span>
        <span id="right">&gt;</span>
        <div>
            <ul id="タグリスト">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </div>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: