jQueryはシンプルなカルーセル効果を実装します

みなさんこんにちは。今日はカルーセルの実装についてお話しします。私が作成したカルーセルの効果は次のとおりです。

まず、背景画像、方向アイコン、インジケーターで構成されていることがわかります。背景画像、方向アイコン、インジケーターが積み重ねられているため、レイアウトするときに絶対配置を使用する必要があることがわかりました。方向アイコンをクリックすると画像がそれに応じて変化し、インジケーターをクリックすると画像がそれに応じて変化し、クリックしない場合は 5 秒ごとに自動的に再生され、クリックしない場合は方向アイコンが表示されない、という動作を実現したいと考えています。

構造レイアウト: 1 つの div を使用して 3 つの div をラップし、内部の 3 つの div にそれぞれ背景画像部分、方向アイコン部分、インジケーター部分を表示します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <link rel="スタイルシート" href="./css/lunbotu.css" >
</head>
<本文>
<!--スライドショーセクション全体-->
<div class="carousel">
    <!--画像の背景-->
    <div class="content">
        <ul>
            <li><a href=""><img src=" ./img/dj.jpg" alt=""></a></li>
            <li><a href=""><img src=" ./img/ali.jpg" alt=""></a></li>
            <li><a href=""><img src=" ./img/al.jpg" alt=""></a></li>
            <li><a href=""><img src=" ./img/hml.jpg" alt=""></a></li>
            <li><a href=""><img src=" ./img/yao.jpg" alt=""></a></li>
            <li><a href=""><img src=" ./img/xia.jpg" alt=""></a></li>
        </ul>
    </div>
    <!-- 左と右に移動アイコン -->
    <div class="pos">
        <a href="" class=" left"><img src="./img/arrow-left.png" alt=""></a>
        <a href="" class=" right"><img src="./img/arrow-right.png" alt=""></a>
    </div>
    <!--インジケーター-->
    <div class="dot">
        <ul>
            <li class="active"><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </div>
</div>
<script src="js/jquery-3.6.0.js"></script>
<script src="js/lunbotu.js"></script>
</本文>
</html>

スタイルコード:自分好みの色とスタイルをデザインできます。絶対的な配置を使用する場合は、息子が父親と同じであるという原則に従う必要があることに注意してください。インターフェース上に画像を 1 つだけ表示したい場合は、overflow: hidden; を使用して余分な部分を非表示にすることができます。配置後、top: 50%; transform: translateY(-50%); vertical center display: none; を設定できます。

/*タグに付属するスタイルを削除します*/
* {
    マージン: 0;
    パディング: 0;
}
 
ul {
    リストスタイル: なし;
}
 
{
    テキスト装飾: なし;
}
 
画像 {
    幅: 100%;
}
/*カルーセル全体のレイアウトを設定する*/
.カルーセル{
    位置: 相対的;
    マージン: 40px 自動;
    幅: 1000ピクセル;
    高さ: 460ピクセル;
    境界線: 1px実線 rgba(0, 0, 0, 0.1);
    ボックスのサイズ: 境界線ボックス;
    /*余分な部分を非表示にする*/
    オーバーフロー: 非表示;
}
/*背景画像のレイアウトを設定する*/
。コンテンツ {
    位置: 絶対;
    zインデックス: 1;
}
/*左右のアイコンとインジケーターのレイアウトを設定します*/
.pos、
.dot {
    位置: 絶対;
    zインデックス: 2;
    幅: 100%;
}
/*左と右の移動アイコンを最初に垂直中央に配置し、表示されないように設定します*/
.pos {
    上位: 50%;
    変換: translateY(-50%);
    表示: なし;
}
/*左と右のアイコンの背景を設定します*/
.pos > a {
    パディング: 10px 0;
    境界線の半径: 15px;
    背景: rgba(0, 0, 0, 0.5);
}
/*左移動アイコンの位置を設定する*/
。左 {
    フロート: 左;
}
/*右移動アイコンの位置を設定する*/
。右 {
    フロート: 右;
}
/*インジケーター表示の位置を設定する*/
.dot {
    下: 30px;
    テキスト配置: 中央;
}
/*インジケーターの背景を設定する*/
.dot ul {
    表示: インラインブロック;
    パディング: 2px;
    背景: rgba(0, 0, 0, .2);
    境界線の半径: 15px;
 
}
/*ドットのサイズを設定する*/
.dot > ul > li {
    フロート: 左;
    マージン: 5px;
    幅: 10px;
    高さ: 10px;
    境界線の半径: 50%;
    背景: 白;
    カーソル: ポインタ;
}
/*現在の画像を表示するときのインジケーターの位置を設定します*/
。アクティブ {
    背景: rgba(255, 255, 255, .6) !重要;
}

JavaScript コード:最初は画像を非表示にし、デフォルトで最初の画像が表示されることに注意してください。そうでない場合、最初にどの画像をクリックしても、2 番目の画像が表示されます。次の画像を表示するときは、前の画像のマークとインジケーターをクリアする必要があります

$(関数() {
    /*現在の画像のインデックスを保存します*/
    インデックスを 0 にします。
    btn = false とします。
    /*タグ a の更新機能を削除します*/
    $('a[href=""]').prop('href', 'javascript:;');
    /*最初に写真を非表示にして、デフォルトで最初の写真を表示します*/
    $('.content>ul>li').hide();
    $('.content>ul>li:eq(0)').show();
    // 方向矢印アイコンをフェードイン/フェードアウトするように設定します $('.carousel').hover(function () {
        $('.pos').stop().fadeIn()
    }、 関数 （） {
        $('.pos').stop().fadeOut()
    })
    // クリックイベントを左方向アイコンにバインドします $('.left').on('click', function () {
        ボタン = true;
        クリーン（）;
        （インデックス == 0）の場合{
            インデックス = 5;
        } それ以外 {
             - 索引;
        }
        見せる（）;
    })
    // クリックイベントを右方向アイコンにバインドします $('.right').on('click', function () {
        ボタン = true;
        クリーン（）;
        （インデックス == 5）の場合{
            インデックス = 0;
        } それ以外 {
            ++インデックス;
        }
        見せる（）;
    })
    //インジケーター表示関数（クリックイベントをインジケーターにバインド）
    $('.dot li').on('click', 関数() {
        ボタン = true;
        今度は $(this).index() とします。
        if (now != インデックス) {
            クリーン（）;
            インデックス = 現在;
            見せる（）;
        }
    })
    //自動再生機能（タイマー）
    setInterval(関数() {
        if (!btn) {
            クリーン（）;
            （インデックス == 5）の場合{
                インデックス = 0;
            } それ以外 {
                ++インデックス;
            }
            見せる（）;
        } それ以外 {
            ボタン = false;
        }

    }, 5000)

    //前の画像とインジケーターをクリアする function clean() {
        $(`.content>ul>li:eq(${index})`).stop().fadeOut();
        $(`.dot>ul>li:eq(${index})`).removeClass('active');
    }
    //インジケーター関数に新しい画像とインジケーターを追加します show() {
        コンソールログ(インデックス);
        $(`.content>ul>li:eq(${index})`).stop().fadeIn();
        コンソールログ($(`.content>ul>li:eq(${index})`))
        $(`.dot>ul>li:eq(${index})`).addClass('active');

    }
})

結果：