3Dカルーセル効果を実現するjs

 *{
            パディング: 0;
            マージン: 0;
        }
        。箱{
            位置: 相対的;
            幅: 100%;
            高さ: 100%;
            上: 200px;
            マージン: 自動;
        }
        .ワーパー{
            位置: 絶対;
            幅: 100%;
            高さ: 100%;
            パースペクティブ: 800px;
            変換スタイル:3D を保持します。
 
        }
        .box .warpper img{
            幅: 300ピクセル;
            高さ: 200px;
            フロート: 左;
            位置: 絶対;
            上: 0;
            左: 0;
            下部: 0;
            右: 0;
            マージン: 自動;
            境界線の半径: 8px;
            遷移: すべて 1 のイーズイン アウト。
        }
        .btn{
            位置: 相対的;
            上位: 50%;
            左: 50%; 
            幅: 1200ピクセル;
            変換: translate(-50%,-20px);
        }
        .btn .left、.btn .right{
            高さ: 50px;
            幅: 50px;
            フォントサイズ: 30px;
            テキスト配置: 中央;
            行の高さ: 50px;
            背景色: 黒;
            色: 白;
            境界線の半径: 15%;
            位置: 絶対;
        }
        .btn .left{
            左: 0;
        }
        .btn .right{
            右: 0;
        }
        .btn span:hover{
            背景色: rgba(0,0,0,0.8);
        }
        .ポイント{
            位置: 絶対;
            左: 50%;
            下: 10px;
            変換: translate(-50%,200px);
            高さ: 14px;
        }
        .ポイント li{
            表示: インラインブロック;
            リストスタイル: なし;
            幅: 14px;
            高さ: 14px;
            境界線: 1px実線 #000;
            境界線の半径: 50%;
            背景色: 白;
            マージン: 0 5px;
        }
        .ポイント.現在{
            背景色: 赤;
        }

<div class="box">
        <div class="warpper">
            <img src="./Inspiration 3.jpg" alt="">
            <img src="./Inspirational2.jpg" alt="">
            <img src="./2f1d.jpg" alt="">
            <img src="./aimg.jpg" alt="">
            <img src="./peg.jpg" alt="">
        </div>
        <div class="btn" id="btn">
            <span class="left"> < </span>
            <span class="right"> > </span>
        </div>
        <ul class="ポイント">
        </ul>
    </div>
<script src="swarp.js"></script>

var imgs = document.querySelectorAll("img")
var btns = document.querySelectorAll("span")
var ul = document.querySelector(".points")
var lis = document.getElementsByTagName("li")
変数タイマー
var current = 0 // 現在再生中の画像のインデックス var flag = true // クリック手ぶれ補正の調整 var len = imgs.length // 画像の長さ function loadFirst() {
    画像移動()
    バインド（）
    ボタンクリック()
    getDot()
    ドットを表示()
    自動再生()
}
ロードファースト()
関数imgMove() {
    var mlen = Math.floor(len / 2)
    (var i = 0; i < mlen; i++) の場合 {
        // 現在の再生画像インデックス値 var rimg = current + 1 + i
        var limg = len + current - 1 - i
        リムの長さが 1 以上の場合
            リム -= 長さ
        }
        （limg >= len）の場合{
            limg -= len
        }
        imgs[limg].style.transform = `translateX(${150 * (i + 1)}px) translateZ(${200 - i * 100}px) rotateY(-30deg)`
        imgs[rimg].style.transform = `translateX(${-150 * (i + 1)}px) translateZ(${200 - i * 100}px) rotateY(30deg)`
    }
    imgs[現在].style.transform = `translateZ(300px)`
}
// 自動再生機能 function autoPlay() {
    タイマー = setInterval(関数() {
        (現在値 >= 長さ - 1) の場合 {
            電流 = 0
        } それ以外 {
            現在の++
        }
        画像移動()
        オートLi()
    }, 3000)
}
// 画像をクリックして再生します。関数bind() {
    (i = 0; i < imgs.length; i++ とします) {
        imgs[i].onclick = 関数 () {
            電流 = i
            画像移動()
            オートLi()
        }
        imgs[i].onmouseover = 関数 () {
            クリアインターバル(タイマー)
        }
        imgs[i].onmouseout = 関数 () {
            自動再生()
        }
    }
}
// 左ボタンと右ボタンをクリックする function btnClick() {
    (i = 0 とします; i < btns.length; i++) {
        btns[i].onclick = 関数（）{
            // クリックミスを防ぐ if (!flag) {
                戻る
            }
            フラグ = 偽
            (i == 0) の場合 {
                // 前 if (current <= 0) {
                    現在の長さ = 長さ - 1
                } それ以外 {
                    現在 - 
                }
            } それ以外 {
                //次に、(現在の長さ >= 1) {
                    電流 = 0
                } それ以外 {
                    現在の++
                }
            }
            setTimeout(関数() {
                フラグ = true
            }, 1000)
 
            画像移動()
            オートLi()
 
        }
        btns[i].onmouseenter = 関数（）{
            クリアインターバル(タイマー)
        }
        btns[i].onmouseout = 関数（）{
            自動再生()
        }
    }
}
// ドット関数 getDot() {
    (var i = 0; i < len; i++) の場合 {
        ul.innerHTML += `<li></li>`
    }
    lis[0].classList.add("現在")
}
関数 showDot() {
    (i = 0; i < len; i++) の場合 {
        lis[i].onclick = 関数（）{
            (var j = 0; j < len; j++) の場合 {
                lis[j].classList.remove("現在")
            }
            this.classList.add("現在")
            電流 = i
            画像移動()
        }
    }
}
関数autoLi() {
    (var i = 0; i < len; i++) の場合 {
        if (i == 現在の) {
            lis[i].classList.add("現在")
        } それ以外 {
            lis[i].classList.remove("現在")
        }
    }
}