カルーセル例の JS 実装

// 左矢印要素と右矢印要素を取得します。let arrow_l = this.document.querySelector('.arrow-l');
    arrow_r を this.document.querySelector('.arrow-r') とします。
    // スライドショー ボックス要素を取得します。let focus = this.document.querySelector('.focus');

    // スライドショーボックスにマウスインとマウスアウトのイベントを追加して、左矢印と右矢印を表示または非表示にします focus.addEventListener('mouseenter', function(e) {
        arrow_l.style.display = 'ブロック';
        arrow_r.style.display = 'ブロック';
        // マウスが移動したときにタイミング関数をクリアし、カルーセルは自動的にスライドしなくなります。clearInterval(timer);
        タイマー = null;

    });

    focus.addEventListener('mouseleave', 関数(e) {
        arrow_l.style.display = 'なし';
        arrow_r.style.display = 'なし';
        //マウスを移動して時間指定タスクを追加し、2秒ごとに右矢印のクリックをトリガーします。timer = setInterval(function() {
            矢印をクリックします。
        }, 2000);
    })

// ul リスト (スライドショー リスト) と ol リスト (小さな円のリスト) の要素を取得します。 var ul = focus.querySelector('ul');
// 現時点では ol リストに要素はありません var ol = focus.querySelector('.circle');
// 円形スライドショーリスト内のスライドショーと同じ数の小さな円を追加します for (var i = 0; i < ul.children.length; i++) {
        // li タグを作成します var li = this.document.createElement('li');
        // カルーセル画像のサブスクリプトとして li タグにカスタム属性を追加します for li.setAttribute('l-index', i);
        // ol タグに li タグを追加します ol.appendChild(li);
        //各liタグにクリック機能を追加します li.addEventListener('click', function() {
            // すべての小さな円のスタイルをクリアします for (var j = 0; j < ol.children.length; j++) {
                ol.children[j].className = '';
            }
            // スタイルを追加するには小さな円をクリックします this.className = 'current';

   // num を変更するには小さな円をクリックし、カルーセルを変更するには circl をクリックします。num = this.getAttribute('l-index');
            circl = this.getAttribute('l-index');
            // アニメーション効果 animate(ul, -num * focusWidth);
        })

    }

// 最初のスライドショーのノードを複製して ul に追加します // 最後のスライドショーを再生するときに、一貫性を保つために最初のスライドショーに切り替えます ol.children[0].className = 'current';
    cloneLi = ul.children[0].cloneNode(true); とします。
    ul.appendChild(クローンLi);

    // カルーセルで再生された画像の数を記録するための下付き文字を追加します。num = 0;
    // num と同様に、小さい円の下付き文字を記録します。circl = 0;
    // スロットルフラグを追加 = true;

// 右矢印のクリックイベントをクリックします arrow_r.addEventListener('click', function(e) {
        // スロットルを追加します。デフォルト値は True です。クリック直後に false に変更すると、最後のクリックイベントが処理されていない場合、この時間内のクリックイベントは処理されません。if (flag) {
            //スロットルバルブの状態を変更します。flag = false;

            // num インデックスが最後の場合は、最初のインデックスに復元し、num インデックスをデフォルトの 0 に変更します。
            num == ul.children.length - 1の場合{
                ul.style.left = 0;
                数値 = 0;

            }
            // 数値の添え字に 1 を足す
            数値++;
            // スライドのアニメーション効果をスライド数 * 1スライドの幅に変更します animate(ul, -num * focusWidth, function() {
                // コールバック関数はスロットルを true に設定し、再度クリックできるようにします。flag = true;
            });

            // 小さな円 +1
            円++;
            // 小さな円が最後の円に達すると、0 に戻ります
            （円 == ul.children.length - 1）の場合{
                円 = 0;
            }
            // 小さい円のスタイルを変更します circlChange();
        }
    })

//左矢印クリックイベント arrow_l.addEventListener('click', function(e) {
        if (フラグ) {
            フラグ = false;
            // 値が0の場合、最初の画像から左に進むことを意味します if (num == 0) {
                // num の添え字を最後のものに変更します num = ul.children.length - 1;
                // カルーセル画像を最後のものに変更します ul.style.left = -num * focusWidth + 'px';
            }
            // 数値 -1
            数値--;
            // アニメーション効果 animate(ul, -num * focusWidth, function() {
                フラグ = true;
            });
            // 小さな円が0の場合、最初のスライドショーに到達したことを意味します if (circl == 0) {
                // 最後まで小さな円 circl = ul.children.length - 1;
            }
            // 小さい円 -1
            円--;
            // 小さい円のスタイルを変更します circlChange();
        }
    })

関数circlChange() {
     // ol リストを走査し、各小さな円のスタイルを削除します for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        };
        // 現在の circl の下付き文字の小さい円にスタイルを追加します。ol.children[circl].className = 'current';
    }

関数 animate(obj, target, callback) {
    // console.log(callback); callback = function() {} callback() を呼び出すとき


    // まず前のタイマーをクリアし、現在のタイマーのみを保持して実行します clearInterval(obj.timer);
    obj.timer = setInterval(関数() {
        // ステップ値をタイマーに書き込みます // 小数点の問題を回避するためにステップ値を整数に変更します // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var ステップ = (ターゲット - obj.offsetLeft) / 10;
        ステップ = ステップ > 0 ? Math.ceil(step) : Math.floor(step);
        obj.offsetLeft == ターゲットの場合 {
            // アニメーションを停止すると、基本的にタイマーも停止します。clearInterval(obj.timer);
            //タイマーの最後にコールバック関数を記述します // if (callback) {
            // // 関数を呼び出す // callback();
            // }
            コールバック && コールバック();
        }
        // 1ずつ増加するステップ値を徐々に減少する値に変更します。ステップ式: (目標値 - 現在位置) / 10
        obj.style.left = obj.offsetLeft + ステップ + 'px';

    }, 15);
}