シンプルなカルーセルの最も完全なコード分析を実装するJavaScript（ES6オブジェクト指向）

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

完全なコード:

<!DOCTYPE html>
<html>
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>ES6 カルーセル画像</title>
    <スクリプト></スクリプト>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }
        。箱 {
            幅: 500ピクセル;
            高さ: 300px;
            境界線: 1px 銀色;
            オーバーフロー: 非表示;
            マージン: 自動;
            上マージン: 50px;
            位置: 相対的;
            上: 0;
            左: 0;
        }
        .外側{
            リストスタイル: なし;
            位置: 絶対;
            上: 0;
            左: 0;
            遷移: 0.3 秒すべて線形。
        }
        .img {
            幅: 500ピクセル;
            高さ: 300px;
            フロート: 左;
        }
  .btns スパン {
   位置: 絶対;
   幅: 25px;
   高さ: 40px;
   上位: 50%;
   上マージン: -20px;
   行の高さ: 40px;
   テキスト配置: 中央;
   フォントの太さ: 太字;
   フォントファミリー: Simsun;
   フォントサイズ: 30px;
   境界線: 1px 銀色;
   不透明度: 0.5;
   カーソル: ポインタ;
   色: #fff;
   背景：黒;
  }
  .btns .left {
   左: 5px;
  }
  .btns .right {
   左: 100%;
   左マージン: -32px;
  }
        .right > :first-child、.left > :first-child {
            幅: 35px;
            高さ: 35px;
        }
        .oOl {
            幅: 163ピクセル;
            位置: 絶対;
            右: 0;
            左: 0;
            マージン: 自動;
            下: 10px;
            リストスタイル: なし;
        }
        .oLi {
            幅: 25px;
            高さ: 25px;
            背景: 白;
            境界線の半径: 50%;
            フロート: 左;
        }
        。色 {
            背景：黒;
        }
    </スタイル>
</head>
<本文>
<div class="box">
    <ul class="outer">
        <li class="img" style="background-image:url(img/0.jpeg)"></li>
        <li class="img" style="background-image:url(img/1.jpeg)"></li>
        <li class="img" style="background-image:url(img/2.jpeg)"></li>
        <li class="img" style="background-image:url(img/3.jpeg)"></li>
        <li class="img" style="background-image:url(img/4.jpeg)"></li>
    </ul>
 <div class="btns">
  <span class="left">&lt;</span>
  <span class="right">&gt;</span>
 </div>
</div>
</本文>
<スクリプト>
    クラスチャート{
        コンストラクター(名前、json) {
   //ボックス名を取得します。this.box = document.querySelector(name);
            this.json = json;
            //カルーセルのプロパティを取得します。 this.outer = document.querySelector(name + ' .outer'); //スペースに注意してください。 this.left = document.querySelector(name + ' .left');
            this.right = document.querySelector(名前 + '.right');
            //初期化 this.timer = null; //自動的に再生 this.iNow = 0;
            これを初期化します。
        }
        初期化() {
            const that = this; //これを保存
            コンソールにログ出力します。
            （this.json.a）の場合{
                コンソールログ(1);
            }
            //最初のものを複製して最後に配置します。let uLi = that.outer.children[0].cloneNode(true);
            that.outer.appendChild(uLi);
            that.outer.style.width = that.outer.children.length * that.outer.children[0].offsetWidth + 'px';
            //クリックすると左右にスライドします if (that.json.slide) {
                that.left.style.display = 'ブロック';
                that.right.style.display = 'ブロック';
                this.left.onclick = () => that.rightGo();
                this.right.onclick = () => that.leftGo();
            }
            // 自動的に再生 if (that.json.move) {
                that.moveGo();
                //マウスが内側と外側に移動する if (that.json.loop) {
                    that.box.onmousemove = () => clearInterval(that.timer);
                    that.box.onmouseout = () => that.moveGo();
                }
            }
            //小さなドットを表示する if (that.json.nav) {
                oOL = document.createElement('ol') とします。
                oOL.クラス名 = 'oOl';
                oOL.style.left = that.json.distanceLeft + 'px';
                that.box.appendChild(oOL);
                (i = 0 とします; i < that.outer.children.length - 1; i++) {
                    oLi = document.createElement('li') とします。
                    oLi.クラス名 = 'oLi';
                    oLi.style.marginLeft = that.json.distance + 'px';
                    oOL.appendChild(oLi);
                }
                oOL.style.width = ((that.outer.children.length - 1) * document.querySelector('.oLi').offsetWidth) + (that.json.distance * that.outer.children.length) + 'px';
                同様();
            }
        };
        右に移動する() {
            this.iNow++;
            if (this.iNow >= this.outer.children.length) {
                this.iNow = 1;
                this.outer.style.transition = '0s すべて線形';
                this.outer.style.left = 0;
            }
            this.outer.style.left = -this.iNow * this.outer.children[0].offsetWidth + 'px';
            this.outer.style.transition = '0.3秒、すべて線形';
            this.alike();
        };
        左へ移動() {
            this.iNow--;
            (this.iNow <= -1) の場合 {
                this.iNow = this.outer.children.length - 1;
                this.outer.style.transition = '0s すべて線形';
                this.outer.style.left = -(this.outer.children.length - 1) * this.outer.children[0].offsetWidth + 'px';
                this.iNow = this.outer.children.length - 2;
            }
            this.outer.style.left = -this.iNow * this.outer.children[0].offsetWidth + 'px';
            this.outer.style.transition = '0.3秒、すべて線形';
   this.alike();
        };
        移動() {
            const that = this;
            this.timer = setInterval(() => that.rightGo(), that.json.speed || 1500)
        };
        // 点は各画像に同様に対応します() {
            li = document.querySelectorAll('.oLi') とします。
            (i = 0; i < li.length; i++ とします) {
                li[i].classList.remove('color');
                if (i == this.iNow) {
                    li[i].classList.add('色');
                } それ以外 {
                    li[i].classList.remove('color');
                }
                //特別: 最後のが最初のもの if (this.iNow == li.length) {
                    li[0].classList.add('色');
                }
                //小さなドットのクリックイベント if (this.json.event) {
                    li[i].onmouseover = () => {
                        (i = 0; i < li.length; i++ とします) {
                            li[i].classList.remove('color');
                        }
                        li[i].classList.add('色');
                        this.outer.style.left = -i * this.outer.children[0].offsetWidth + 'px';
                    }
                }
            }
        }
    }
    新しいチャート('.box', {
        move: true, //自動カルーセル speed: 1500, //カルーセル速度 loop: true, //マウスインとマウスアウト効果 slide: true, //左と右のスライド効果をクリック nav: true, //小さなドットを表示 distance: 20, //小さなドットの間隔 event: true //小さなドットのイベント })
</スクリプト>
</html>

写真：