JS でシンプルな画像カルーセル効果を実現

この記事では、シンプルな画像カルーセル効果を実現するためのJSの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

成果を達成する

左ボタンと右ボタンをクリックすると、表示された画像を左右に移動してシームレスにスクロールできます。
下の小さな円をクリックすると、対応する画像インデックスにジャンプします。
上記の操作を行わない場合、写真は自動的に回転します。

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>
    <link rel="スタイルシート" href="./style.css" >
    <script src="./index.js"></script>
    <script src="./animate.js"></script>
</head>

<本文>
    <div class="carousel_box" id="carousel-box">
        <a href="javascript:;" class="arrow-l">
            < </a>
                <a href="javascript:;" class="arrow-r"> > </a>
                <ul class="move">
                    <li><img src="./images/xuezhong_1.jpg" alt=""></li>
                    <li><img src="./images/guimizhizhu_2.jpg" alt=""></li>
                    <li><img src="./images/jianlai_3.jpg" alt=""></li>
                    <li><img src="./images/yichang_4.jpg" alt=""></li>
                </ul>
                <ol class="circle">
                </ol>
    </div>
</本文>

</html>

大きな div ボックス内には、中央に浮かぶ 2 つのボタン、4 つの画像、その下に小さな円の列があります。

CSS ソースコード

*{
    パディング: 0;
    マージン: 0;
}

li {
    リストスタイルタイプ: なし;
}

#カルーセルボックス {
    位置: 相対的;
    幅: 700ピクセル;
    高さ: 300px;
    背景色: ピンク;
    マージン: 100px 自動;
    オーバーフロー: 非表示;
}

.arrow-l,.arrow-r {
    表示: なし;
    位置:絶対;
    幅: 24px;
    高さ: 40px;
    上位: 50%;
    上マージン: -20px;
    背景: rgba(0, 0, 0, 0.3);
    テキスト配置:中央;
    行の高さ: 40px;
    色: #fff;
    フォントサイズ: 18px;
    フォントファミリー: 'icomoon';
    zインデックス: 3;
}
.矢印-r {
    右: 0;
}

#カルーセルボックス画像{
    幅: 700ピクセル;
    高さ: 300px;
}

#カルーセルボックス ul {
    位置:絶対;
    幅: 1000%;
}

#カルーセルボックス ul li {
    フロート: 左;
}

。丸 {
    位置: 絶対;
    下: 10px;
    右: 10px;
}

.circle li {
    フロート: 左;
    幅: 8px;
    高さ: 8px;
    マージン: 0 5px;
    境界線: 2px実線 rgba(255, 255, 255, 0.5);
    境界線の半径: 50%;
    カーソル: ポインタ;
    zインデックス: 9999;
}

。現在 {
    背景色: ピンク;
}

JSソースコード

animate.js: 水平面上で左右に移動する関数

関数 animate(obj, target, callback) {
    タイマー間隔をクリアします。
    obj.timer = setInterval(関数() {
        /* 小数が正か負かを判断し、大きい方を取るか小さい方を取るかを決定します*/
        var ステップ = (ターゲット - obj.offsetLeft) / 10;
        ステップ = ステップ > 0 ? Math.ceil(step) : Math.floor(step);

        obj.offsetLeft == ターゲットの場合 {
            タイマー間隔をクリアします。
            コールバック && コールバック();
        }
        obj.style.left = obj.offsetLeft + ステップ + 'px';
    }, 15);
}

インデックス

window.addEventListener('load', 関数() {
    var カルーセル = document.querySelector('.carousel_box');
    var ul = document.querySelector('.move');
    var ol = document.querySelector('.circle');
    var carouselWidth = carousel.offsetWidth;
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');

    carousel.addEventListener('mouseenter', 関数() {
        arrow_r.style.display = 'ブロック';
        arrow_l.style.display = 'ブロック';
        タイマーの間隔をクリアします。
        timer = null; // タイマー変数をクリアする })

    carousel.addEventListener('mouseleave', 関数() {
        arrow_r.style.display = 'なし';
        arrow_l.style.display = 'なし';
        タイマー = setInterval(関数() {
            矢印をクリックします。
        }, 2000);
    })
    var 数値 = 0;
    var 円 = 0;

    // 写真の数に応じて対応する小さな円を生成します for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        li.setAttribute('インデックス', i);
        ol.appendChild(li);


        li.addEventListener('クリック', 関数() {
            (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = '現在の';
            var n = this.getAttribute('index');
            数値 = n;
            円 = n;
            アニメーション化(ul, -n * carcouselWidth);
            コンソールにログ出力します。
        })
    }

    ol.children[0].className = '現在の';
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(最初の子);

    var フラグ = true;


    /* 関数circleChange() {
        (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = '現在の';
    } */


    arrow_r.addEventListener('クリック', 関数() {

        if (フラグ) {
            フラグ = false;
            num == ul.children.length - 1の場合{
                ul.style.left = 0;
                数値 = 0;
            }
            数値++;
            アニメーション(ul, -num * carcouselWidth, 関数() {
                フラグ = true;
            });
        }

        サークル++;
        円の長さが ol.children.length の場合
            円 = 0;
        }

        円の変更();
    })

    arrow_l.addEventListener('クリック', 関数() {
        if (フラグ) {
            フラグ = false;
            数値 == 0 の場合
                num = ul.children.length - 1;
                ul.style.left = -num * carcouselWidth + 'px';

            }
            数値--;
            アニメーション(ul, -num * carcouselWidth, 関数() {
                フラグ = true;
            });

            丸 - ;
            円 = 円 < 0 ? ol.children.length - 1 : 円;
            //関数circleChange()を呼び出します。
        }
    });


    関数circleChange() {

        (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }

        ol.children[circle].className = '現在の';
    }

    var タイマー = setInterval(関数 () {

        矢印をクリックします。
    }, 2000);

経験： js 実装機能では、写真の数に応じて小さな円を生成し、シームレスなスクロールを可能にする方法に注意することが重要です。
未解決のバグ: 小さな円を素早く複数回クリックしてジャンプすると、小さな円と画像のインデックス位置が混同されることがあります。同様に、左ボタンと右ボタンをクリックすると、同様の問題が発生することがあります。

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

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