JS は複数のタブを切り替えるカルーセルを実装します

<div id="ボックス">
    <div class="風景写真">
      <img class="show" src="imgs/s2.jpg" alt="風景">
      <img src="imgs/s3.jpg" alt="風景">
      <img src="imgs/s1.jpg" alt="風景">
      <img src="imgs/s5.jpg" alt="風景">
      <img src="imgs/s4.jpg" alt="風景">
    </div>
    <div class="車の写真">
      <img src="imgs/animal4.jpg" alt="動物">
      <img src="imgs/animal3.jpg" alt="動物">
      <img src="imgs/animal2.jpg" alt="動物">
      <img src="imgs/animal1.jpg" alt="動物">
    </div>
    <div class="エンターテイメント写真">
      <img src="imgs/entertainment1.jpg" alt="エンターテイメント">
      <img src="imgs/entertainment2.jpg" alt="エンターテイメント">
      <img src="imgs/entertainment3.jpg" alt="エンターテイメント">
      <img src="imgs/entertainment4.jpg" alt="エンターテイメント">
      <img src="imgs/entertainment5.jpg" alt="エンターテイメント">
    </div>
    <div class="leftbar">
      <div class="checked">横向き</div>
      <div>有名な車</div>
      <div>エンターテイメント</div>
    </div>
    <div class="bottombar">
 
    </div>
</div>

/* レイアウトの利便性のため、flex は主にコンテナで使用されます */
＃箱 {
      位置: 相対的;
      幅: 460ピクセル;
      高さ: 300px;
      マージン: 40px 自動;
      境界線: 1px実線rgb(109, 98, 98);
      ユーザー選択: なし;
    }
    /* サイドバーのレイアウト */
    .左バー{
      ディスプレイ: フレックス;
      flex-direction: 列;
      コンテンツの両端揃え: スペースの間;
      位置: 絶対;
      上: -1px;
      左: -80px;
      幅: 80ピクセル;
      高さ: 100%;
      テキスト配置: 中央;
      フォントサイズ: 20px;
      カーソル: ポインタ;
    }
 
    .leftbar div {
      フレックス: 1;
      行の高さ: 100px;
      背景色: cadetblue;
      文字間隔: 5px;
    }
 
    .leftbar div:n番目の子(2) {
      上境界線: 1px 実線 #fff;
      下境界線: 1px 実線 #fff;
    }
 
    /* 下部スイッチボタンスタイルのデザイン*/
    .ボトムバー{
      ディスプレイ: フレックス;
      コンテンツの両端揃え: スペースの間;
      位置: 絶対;
      下: -1px;
      右: -1px;
      zインデックス: 10;
      幅: 200ピクセル;
      高さ: 30px;
      カーソル: ポインタ;
    }
 
    .ボトムバー div {
      フレックス: 1;
      行の高さ: 30px;
      背景色: rgb(232, 233, 235, .5);
      テキスト配置: 中央;
      フォントの太さ: 700;
    }
 
    .bottombar div~div {
      border-left: 1px のグレー実線;
    }
 
    画像 {
      位置: 絶対;
      表示: ブロック;
      幅: 460ピクセル;
      高さ: 300px;
    }
 
    。見せる {
      zインデックス: 5;
    }
 
    .leftbar .checked、
    .bottombar .checked {
      背景色: rgb(241, 5, 5);
    }

var Box = document.querySelector('#box'), pic = Box.querySelectorAll('.pic'),
    Idx = 0、インデックス = 0、タイマー = null、
    ltDiv = Box.querySelector('.leftbar')、btDiv = Box.querySelector('.bottombar')、
    画像 = Box.querySelectorAll('img');
 
    function createBtBar(len){// 下部のスイッチボタンを動的に作成します var str = '';
      (var i = 0; i < len; i++) の場合 {
        str += `<div>${i + 1}</div>`;
      }
      btDiv.innerHTML = str;
      btDiv.children[0].classList.add('チェック済み');
    }
 
    function initialize(){//ページの初期状態 createBtBar(pic[0].children.length);
    }
    初期化します。
 
    function clearZindex(){//すべての画像の位置レベルをリセットします for (var k = 0; k < Img.length; k++) {
        Img[k].classList.remove('表示');
      }
    }
 
    ltDiv.addEventListener('click', (e) =>{//サイドバー項目 switchif (e.target.tagName.toLowerCase() === 'div') {
        (var j = 0; j < ltDiv.children.length; j++) {
          ltDiv.children[j].classList.remove('checked');
        }
 
        Zindexをクリアします。
        idx = 0;
        インデックス = getEleIdx(e.target);
        ltDiv.children[index].classList.add('checked');
        pic[index].children[0].classList.add('表示');
        createBtBar(pic[index].children.length);
      }
    });
 
    btDiv.addEventListener('click', (e) =>{//デリゲートは下部のスイッチボタンをリッスンします if (e.target.tagName.toLowerCase() === 'div') {
        関数changePic(コールバック) {
          btDiv.children[Idx].classList.remove('チェック済み');
 
          Zindexをクリアします。
          コールバック && コールバック();
          btDiv.children[Idx].classList.add('checked');
          pic[index].children[Idx].classList.add('show');
        }
        changePic(関数() {
          Idx = getEleIdx(e.target);
        });
      }
    });
 
    function getEleIdx(item){//DOM要素のインデックスを取得 var elements = item.parentNode.children;
      (var i = 0, len = elements.length; i < len; i++) {
        if (item === elements[i]) {
          i を返します。
        }
      }
    }
 
    function loopShow(){//ループ自動表示 clearInterval(timer);
      タイマー = setInterval(関数() {
        pic[index].children[Idx].classList.remove('show');
        btDiv.children[Idx].classList.remove('チェック済み');
        idx += 1;
        （Idx < 0 || Idx > pic[index].children.length - 1）の場合{
          idx = 0;
        }
        pic[index].children[Idx].classList.add('show');
        btDiv.children[Idx].classList.add('checked');
      }, 1000);
    }
 
    ループ表示();
 
    Box.addEventListener('mouseover', 関数() {
      clearInterval(timer); // マウスを表示領域に移動してカルーセルを停止します });
    Box.addEventListener('mouseout', 関数() {
      loopShow(); // マウスを表示領域外に移動すると自動的に回転します });