スライディングカルーセル効果を実現する js

<div class="banner">
        <ul>
            <li>
                <a href="#" >
                    <img src="images/1.jpeg">
                </a>
            </li>
            <li>
                <a href="#" >
                    <img src="./images/2.jpg">
                </a>
            </li>
            <li>
                <a href="#" >
                    <img src="./images/3.jpg">
                </a>
            </li>
            <li>
                <a href="#" >
                    <img src="./images/4.jpg">
                </a>
            </li>
            <li>
                <a href="#" >
                    <img src="./images/5.jpg">
                </a>
            </li>
        </ul>
        <オル>
            
        </ol>
        <a href="#" class="left">&lt;</a>
        <a href="#" class="right">&gt;</a>
</div>

<スタイル>
    *{
        パディング: 0;
        マージン: 0;
        リストスタイル: なし;
        テキスト装飾: なし;
        色:#000;
    }
    。バナー{
        幅: 500ピクセル;
        高さ: 300px;
        マージン:50px 自動;
        位置: 相対的;
        境界線:1px実線 #000;
        オーバーフロー:非表示;
    }
    .バナー ul{
        位置: 絶対;
        左: 0;
        上: 0;
        高さ: 300px;
        /* 幅: 2500px; */
    }
    .バナー ul li{
        幅: 500ピクセル;
        高さ: 300px;
        フロート:左;
    }
    .banner ul li a img{
        幅: 500ピクセル;
        高さ: 300px;
    }
    .バナーol{
        /* 幅: 100px; */
        高さ: 20px;
        位置:絶対;
        下:10px;
        背景色: rgba(255,255,255,.7);
        残り:50%;
        変換: translateX(-50%);
        境界線の半径:10px;
        ディスプレイ: フレックス;
        コンテンツの均等配置: スペースを均等に;
        アイテムの位置を中央揃えにします。
    }
    /* .banner ol li{
        幅: 10px;
        高さ: 10px;
        境界線の半径:50%;
        背景色: スカイブルー;
    } */
    .banner>a{
        幅: 20px;
        高さ: 40px;
        位置:絶対;
        上位:50%;
        変換: translateY(-50%);
        背景色: rgba(10,10,10,.5);
        フォントサイズ:20px;
        色:#fff;
        行の高さ: 2;
        テキスト配置: 中央;
    }
    .banner>a.left{
        左: 0;
    }
    .banner>a.right{
        右: 0;
    }

var div = document.querySelector('.banner');
var ul = document.querySelector('ul');
var ol = document.querySelector('ol');
var left = document.querySelector('a.left');
var right = document.querySelector('a.right');
    // 添字として使用する変数インデックスを設定します。var index = 1;
    // ul の下の li をトラバースする
for(var i=0;i<ul.children.length;i++){
    // ul の下の各 li は、その下の小さなドット ボタンに対応している必要があります // 同じ数の小さなドットを作成します var li = document.createElement('li');
    setStyle(li,{
        幅: "10px",
        高さ: "10px",
        "境界半径":"50%",
        "背景色": "スカイブルー"
    })
    // 作成されたすべての li を大きなボックスに配置します ol.appendChild(li);
}
    // ol ボックス自体には幅がありません。内部の小さなドットの数に応じて ol ボックスの幅を設定する必要があります。ol.style.width = ol.firstElementChild.offsetWidth*ul.children.length*2 + 'px';
    // スタイル付きのドットを表す変数を設定します。var that = ol.children[index-1];
//ol の最初の息子の色を赤に設定します that.style.background = 'red';
// スライディング カルーセル間の接続を改善するには、ul の前後に li を追加します。
var lastLi = ul.lastElementChild.cloneNode(true);
var firstLi = ul.firstElementChild.cloneNode(true);
// コピーしたラベルを ul ボックスの前後に配置します ul.appendChild(firstLi);
ul.insertBefore(lastLi、ul.firstElementChild);
// ul の下の子要素が変更されたため、ul の対応する幅を設定する必要があります。ul.style.width = ul.children.length*lastLi.offsetWidth + 'px';
// 右から左にスライドするため、ul の左の値を負にする必要があります ul.style.left = -ul.firstElementChild.offsetWidth + 'px';
// 変数を設定し、タイマーに割り当てます var timeId;
// スイッチを定義します var flag = true;
//右クリック right.onclick = function(){
    // スイッチがオンでない場合は false を返す
    if(!フラグ){
        false を返します。
    }
    // スイッチが閉じられている場合は、もう一度クリックしても効果がないことを示すために、戻り値をスイッチに割り当てます。flag = false;
    // 先ほどインデックスを定義し、それをクリックするたびにindex++
    インデックス++;
    // 移動関数を呼び出す move(ul,{left:-index*ul.children[0].offsetWidth},function(){
        // 演習が完了したら、関数内で実行する必要があることを入力します // まず、インデックスを判断する必要があります。ul には合計 7 つの子要素があります。インデックスは ul 子要素の添え字に対応するため、インデックスは ul.children.length-1 を超えることはできません。
        if(インデックス == ul.children.length - 1){
            // インデックスがul.children.length-1に等しい場合
            // インデックスを 1 に再割り当てします
            インデックス = 1;
            // また、ulの左の値を再割り当てします。ul.style.left = -index*ul.children[0].offsetWidth + 'px';
        }
        // ドットも画像と一緒に移動する必要があります // 画像に対応するドットを変数に設定します。ドット自体にはスタイルがあるため、まずそのスタイルをデフォルトに設定します that.style.backgroundColor = 'skyblue';
        // 対応する小さなドットのスタイルが変更されました ol.children[index-1].style.backgroundColor = 'red';
        // スタイル変換が成功したら、スタイルを含むドットを変数に代入します。
        つまり、ol.children[index-1]です。
        // 動きの終わりにスイッチをオンにして、右クリックして再度オンにできるようにします。flag = true;
    })
}
//左クリック left.onclick = function(){
    if(!フラグ){
        false を返します。
    }
    フラグ = false;
    // 左クリックは左から右にスライドし、インデックスになります--
    索引 - ;
    move(ul,{left:-index*ul.children[0].offsetWidth},function(){
        if(インデックス == ul.children.length - 1){
            インデックス = 1;
            ul.style.left = -index*ul.children[0].offsetWidth + 'px';
        }
         //イベントに入ったら、まずインデックスの値を決定します if(index==0){
            // インデックスの値が 0 になった場合は、インデックスを再割り当てします。index = ul.children.length-2;
            // そして、ul の左の値を 2 番目の画像の値に再割り当てします。ul.style.left = -index * firstLi.offsetWidth + "px"
        }
        that.style.backgroundColor = 'スカイブルー';
        ol.children[index-1].style.backgroundColor = '赤';
        つまり、ol.children[index-1]です。
        フラグ = true;
    })
}
// ol の下のすべての li をトラバースします
for(let i=0;i<ol.children.length;i++){
    // 小さなドットイベントをクリック ol.children[i].onclick = function(){
    if(!フラグ){
        false を返します。
    }
    フラグ = false;
    // ドットの下部は画像の添え字より 1 小さいため、ドットと画像が index = i+1 に対応できるように、ドット クリック イベントでインデックスを再割り当てする必要があります。
    move(ul,{left:-index*firstLi.offsetWidth},function(){
            // if(インデックス == 0){
            // インデックス = ul.children.length - 2
            // ul.style.left = -index.ul.children[0].offsetWidth + 'px'
            // }
            that.style.backgroundColor = 'スカイブルー';
            ol.children[index-1].style.backgroundColor = '赤';
            つまり、ol.children[index-1]です。
            フラグ = true;
        })
    }
};
    // 自動回転 timeId = setInterval(function(){
        if(!フラグ){
            false を返します。
        }
        フラグ = false;
        インデックス++;
        move(ul,{left:-index*firstLi.offsetWidth},function(){
            if(インデックス == ul.children.length - 1){
                インデックス = 1
                ul.style.left = -index*ul.children[0].offsetWidth + 'px'
            }
            that.style.backgroundColor = 'スカイブルー';
            ol.children[index-1].style.backgroundColor = '赤';
            つまり、ol.children[index-1]です。
            フラグ = true;
        })
    },2000);

    // マウスが通過したらカルーセルを停止しますdiv.onmouseover = function(){
        クリア間隔(timeId);
    }

    //マウスが離れた後に自動的に回転する div.onmouseout = function(){
        timeId = setInterval(関数(){
            if(!フラグ){
                false を返します。
            }
            フラグ = false;
            インデックス++;
            move(ul,{left:-index*firstLi.offsetWidth},function(){
                if(インデックス == ul.children.length - 1){
                    インデックス = 1
                    ul.style.left = -index*ul.children[0].offsetWidth + 'px'
                }
                that.style.backgroundColor = 'スカイブルー';
                ol.children[index-1].style.backgroundColor = '赤';
                つまり、ol.children[index-1]です。
                フラグ = true;
            })
        },1000);
    };
//パッケージ化されたマルチモーション関数 function move(ele,obj,fn){
            timeObj = {} とします。
            for(let attr in obj){
                timeObj[attr] = setInterval(function(){
                    var target = parseFloat(obj[attr]);
                    if(属性 === '不透明度'){
                        ターゲット*=100
                    }
                    var t = parseFloat(getStyle(ele,attr));
                    if(attr === '不透明度'){
                        t*=100
                    }
                    コンソールログ
                    if((ターゲット-t)/100>0){
                        var パーセント = Math.ceil((ターゲット-t)/100);
                    }それ以外{
                        var パーセント = Math.floor((ターゲット-t)/100);
                    }
                    t += パーセント;
                    if (attr === '不透明度') {
                        ele.style[属性] = t/100 
                    }それ以外{
                        ele.style[attr] = t + 'px';
                    }
                    if(t == ターゲット){
                        クリア間隔(timeObj[attr])
                        timeObj[属性]を削除する
                        k = 0 とします。
                        for(let i in timeObj){
                            関数
                        }
                        もしk==0の場合{
                            関数fn();
                            コンソールログ(123)
                        }
                    }
                },10)
            }
        }

// スタイルを取得するためのカプセル化された関数 function getStyle(ele,attr){
    if (window.getComputedStyle) {
        window.getComputedStyle(ele)[attr]を返します。
    }それ以外{
        ele.currentStyle[attr]を返します。
    }
}
// スタイル設定の関数をカプセル化する function setStyle(ele,styleObj){
    for(var attr in styleObj){
        ele.style[属性] = styleObj[属性];
    }
};