jsネイティブカルーセルプラグインの制作

<div id="バナー"></div>

<スクリプト>
        バナーエリア(document.getElementById("バナー"),[
            {imgUrl:"画像",
            link:"ジャンプリンク"
        },
            {imgUrl:"画像",
            link:"ジャンプリンク"
        },
            {imgUrl:"画像",
            link:"ジャンプリンク"
        }
        ])
</スクリプト>

// 2 つのパラメータ、1 つ目はスライド領域、2 つ目は設定関数です。bannerArea(areaDom, options) {
    var imgArea = document.createElement("div");
    var numberArea = document.createElement("div");
    var curIndex = 0; //最初のスライドショー var changeTimer = null;
    var changeDuration = 1000; //間隔 var timer = null;
    
    initImg();//画像を表示する領域を作成します initNumber();//バッジを表示する領域を作成します setStatus();//ステータスを設定します autoChange();//自動的に切り替えます //以下はローカル関数です //画像を作成し、スタイルを設定します function initImg() {
        imgArea.style.width = "100%";
        imgArea.style.height = "100%";
        imgArea.style.display = "flex";
        imgArea.style.overflow = "非表示";
        (i = 0 とします; i < options.length; i++) {
            var obj = オプション[i];
            var img = document.createElement("img");
            イメージをアップロードする
            スタイルの幅 = "100%";
            スタイルの高さ = "100%";
            スタイル:
            img.addEventListener("クリック", 関数() {
                location.href = オプション[i].link;
            })
            imgArea.appendChild(img);
        }
        imgArea.addEventListener("mouseenter", 関数() {
            間隔をクリアします(変更タイマー)。
            変更タイマー = null;
        })
        imgArea.addEventListener("mouseleave", 関数() {
            自動変更();
        })
        areaDom.appendChild(画像エリア);
    }
    //上付き文字要素を作成し、スタイルを設定する function initNumber() {
        numberArea.style.textAlign = "center";
        numberArea.style.marginTop = "-25px";
        (i = 0 とします; i < options.length; i++) {
            var sp = document.createElement("span");
            sp.style.width = "12px";
            sp.style.height = "12px";
            sp.style.background = "ライトグレー";
            sp.style.display = "インラインブロック";
            sp.style.margin = "0 7px";
            sp.style.borderRadius = "50%";
            sp.style.cursor = "ポインタ";
            sp.addEventListener("クリック", 関数() {
                現在のインデックス = i;
                ステータスを設定します。
            })
            番号エリアに子要素を追加します。
        }
        areaDom.appendChild(数値エリア);
    }
 
    //コーナーエリアのステータスを設定する function setStatus() {
        //円の背景色を設定します for (var i = 0; i < options.length; i++) {
            if (i === 現在のインデックス) {
                //選択した数値に背景色を設定しますArea.children[i].style.background = "rgb(222 57 57)";
            } それ以外 {
                //非選択 numberArea.children[i].style.background = "lightgray";;
            }
 
        }
        //画像を表示します var start = parseInt(imgArea.children[0].style.marginLeft);
        var end = curIndex * -100;
        var dis = 終了 - 開始;
        var 期間 = 500;
        var speed = dis / 期間;
        if (タイマー) {
            タイマーの間隔をクリアします。
        }
        タイマー = setInterval(関数() {
            開始 += 速度 * 20;
            imgArea.children[0].style.marginLeft = 開始 + "%";
            (Math.abs(終了 - 開始) < 1) の場合 {
                imgArea.children[0].style.marginLeft = end + "%";
                タイマーの間隔をクリアします。
            }
        }, 20)
    }
    // 自動切り替え関数 autoChange() {
        if (変更タイマー) {
            戻る;
        }
        changeTimer = setInterval(関数() {
            (curIndex === options.length - 1)の場合{
                カーソルインデックス = 0;
            } それ以外 {
                curIndex++;
            }
            ステータスを設定します。
        }, 変更期間)
    }
 
}