JavaScriptカルーセルの実装について

今日もとても実践的な事例です。名前を聞くだけで高度で難しそうですよね？今日はカルーセル画像の真髄を簡単に学べる事例を書いていきます！！

ルールはこれまでと同じですが、実装効果を見てみましょう。！

カルーセルの作成方法を学ぶための最初のステップは、画像を準備し、ul 内の li でそれらをラップし、li にフロートを与えて 1 行に表示されるようにすることです。ただし、ul の幅を十分に広くするように注意してください。！

さて、HTMLとCSSのコードは次のとおりです（ファイル名：index.html）

<!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>
    <script src="animate.js"></script>
    <script src="slideshow.js"></script>
    <スタイル>
        体 {
            背景色: rgb(151, 147, 147);
        }
 
        * {
            マージン: 0;
            パディング: 0;
        }
 
        div {
            オーバーフロー: 非表示;
            位置: 相対的;
            幅: 500ピクセル;
            高さ: 500px;
            背景色: スカイブルー;
            マージン: 20px 自動;
        }
 
        ul {
            リストスタイル: なし;
        }
 
        .img {
            幅: 600%;
            位置: 絶対;
            左: 0;
        }
 
        li {
            フロート: 左;
        }
 
        画像 {
            幅: 500ピクセル;
            高さ: 500px;
        }
 
        .yuan>li {
            カーソル: ポインタ;
            幅: 10px;
            高さ: 10px;
            背景色: rgb(190, 185, 185);
            境界線の半径: 50%;
            マージン: 0 5px;
            境界線: 1px実線rgb(119, 114, 114);
        }
 
        。元
            位置: 絶対;
            下: 10px;
            左: 50%;
            変換: translateX(-50%);
        }
 
        .yuan .color {
            背景色: rgb(228, 135, 135);
        }
 
        {
            テキスト装飾: なし;
            色: 黒;
            背景色: rgb(112, 111, 111);
            表示: インラインブロック;
            幅: 30ピクセル;
            高さ: 30px;
            テキスト配置: 中央;
            行の高さ: 30px;
            位置: 絶対;
            上位: 50%;
            変換: translateY(-50%);
            表示: なし;
        }
 
        。左 {
            左: 0;
        }
 
        。右 {
            右: 0;
        }
    </スタイル>
</head>
 
<本文>
    <div class="box">
        <ul class="img">
            <li><img src="images/1.webp" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.webp" alt=""></li>
            <li><img src="images/4.webp" alt=""></li>
            <li><img src="images/5.webp" alt=""></li>
        </ul>
        <a href="JavaScript:;" rel="外部nofollow" rel="外部nofollow" class="left">&lt;</a>
        <a href="JavaScript:;" rel="外部nofollow" rel="外部nofollow" class="right">></a>
        <ul class="元"></ul>
    </div>
</本文>
 
</html>

このように書くと、基本的なアウトラインが完成します。

次のステップは、動かすことです。画像を動かすにはどうしたらよいか考えてみましょう。学んだアニメーション効果でしょうか? これらすべての場所で、画像を切り替える効果を実現するためにスローモーションアニメーションを使用する必要があります。js コードが多数あるため、コードをカプセル化するために新しい js ファイルを作成する必要があります。

以下はカプセル化された js コードです (ファイル名: slideshow.js)

window.addEventListener('load', 関数() {
    var img = document.querySelector('.img');
    var yuan = document.querySelector('.yuan');
    var box = document.querySelector('.box');
    var left = document.querySelector('.left');
    var right = document.querySelector('.right');
    var imgwidth = box.offsetWidth; //ボックスの幅（画像の幅）を取得します
    // マウスがトリガーされた後に画像の自動スクロールを停止します box.addEventListener('mouseenter', function () {
        left.style.display = 'ブロック';
        right.style.display = 'ブロック';
        タイマーの間隔をクリアします。
    })
    // マウスを離すと画像の自動スクロールがトリガーされ、再度トリガーされます box.addEventListener('mouseleave', function () {
        left.style.display = 'なし';
        right.style.display = 'なし';
        タイマー = setInterval(関数() {
            右クリック();
        }, 2000)
    })
    // 図に従って次のドットを追加します for (var i = 0; i < img.children.length; i++) {
        var li = document.createElement('li');
        yuan.appendChild(li);
        li.setAttribute('日付インデックス', i);
        li.addEventListener('クリック', 関数() {
            (var j = 0; j < yuan.children.length; j++) {
                yuan.children[j].className = '';
            }
            this.className = '色';
            var index = this.getAttribute('date-index');
            var imgwidth = box.offsetWidth;
            // アニメーション化(obj,target,function(){})
            アニメーション化(img, -index * imgwidth);
            nums = インデックス;
            色 = インデックス;
        })
    }
    // デフォルトでは、最初のドットの色は yuan.children[0].className = 'color' です。
    var 数値 = 0;
    var 色 = 0;
    // シームレススクロールを準備するために最初の画像を最後にコピーします。var li = img.children[0].cloneNode(true);
    img.appendChild(li);
    var フラグ = true;
    // 右側のボタン、次のボタンに切り替えると、ドットが一緒に変化しますright.addEventListener('click', function () {
        if (フラグ) {
            フラグ = false;
            if (nums == img.children.length - 1) {
                数値 = 0;
                左から0まで
            }
            数値++;
            アニメーション(画像、-nums * 画像幅、関数() {
                フラグ = true;
            });
            色++;
            if (colors == yuan.children.length) {
                色 = 0;
            }
            (var j = 0; j < yuan.children.length; j++) {
                yuan.children[j].className = '';
            }
            yuan.children[colors].className = 'color';
        }
    })
    // 左ボタンが次のボタンに切り替わり、ドットも一緒に変化しますleft.addEventListener('click', function () {
        if (フラグ) {
            フラグ = false;
            （数値 == 0）の場合{
                nums = img.children.length - 1;
                img.style.left = -nums * imgwidth + 'px';
            }
            数字--;
            色 - ;
            アニメーション(画像、-nums * 画像幅、関数() {
                フラグ = true;
            });
            （色<0）の場合{
                色 = yuan.children.length - 1;
            }
            // 色 == 0 の場合 {
            // colors = yuan.children.length;
            // }
            // 色--;
            (var j = 0; j < yuan.children.length; j++) {
                yuan.children[j].className = '';
            }
            yuan.children[colors].className = 'color';
        }
    })
    // マウスが画像上を通過しなくても自動的にスクロールします var timer = setInterval(function () {
        右クリック();
    }, 2000)
})

ここで重要な点があります。アニメーション効果なしで動かすにはどうすればよいのでしょうか。将来他のケースを書くときに直接参照できるように、js ファイルを別途カプセル化しました。

コードは以下のとおりです（ファイル名：animate.js）

function animate(obj, target, callback) { // 移動するオブジェクト（移動する人）、移動先、コールバック関数 // 最初に前のタイマーをクリアし、現在のタイマーのみを保持して実行します clearInterval(obj.timer);
    obj.timer = setInterval(関数() {
        // ステップ長をタイマーに書き込みます var step = (target - obj.offsetLeft) / 10; // ステップ長の式: (ターゲット位置 - 現在の位置) / 10
        step = step > 0 ? Math.ceil(step) : Math.floor(step); //ステップの長さを整数に変更します。小数点は使用せず、正の数は切り上げ、負の数は切り捨てます。if (obj.offsetLeft == target) {
            clearInterval(obj.timer) //アニメーションを停止し、基本的にタイマーを停止します if (callback) {
                callback(); //タイマーの最後にコールバック関数を記述します}
        }
        //ステップ長は、速い速度から遅い速度に減速する効果を実現するために徐々に減少する値です。obj.style.left = obj.offsetLeft + step + 'px';
    },15)
}

基本的に、すべてがコメント付きで明確に書かれているので、すべてのステップを理解できるはずです。