JS でカルーセル画像を実装するいくつかの方法

<本文>
 <div id="コンテナ"> /*コンテナ*/
  <div id="wrap" style="left: -400px;"> /*画像リスト*/
   <div class="item item5">l5</div>
   <div class="item item1">1</div>
   <div class="item item2">2</div>
   <div class="item item3">3</div>
   <div class="item item4">4</div>
   <div class="item item5">5</div>
   <div class="item item1">r1</div>
  </div>
 </div>
 <div id="key"> /*ボタンを設定*/   
  <div id="list"> /*小さな円をクリックすると固定画像に切り替わります*/
   <div class="btn1 btnNum">1</div>
   <div class="btn2 btnNum">2</div>
   <div class="btn3 btnNum">3</div>
   <div class="btn4 btnNum">4</div>
   <div class="btn5 btnNum">5</div>
  </div>
  <div id="btn"> /*左右を切り替えるボタン*/
   <button class="left">←</button>
   <button class="right">→</button>
  </div>
 </div>
</本文>

<スタイル>
  ＃容器 {
   幅: 400ピクセル;
   高さ: 300px;
   境界線: 8px rgb(8, 8, 8) 実線;
   マージン: 0 自動;
   上マージン: 150px;
   オーバーフロー: 非表示;
   位置: 相対的;
  }
  ＃包む {
   幅: 2800ピクセル;
   高さ: 300px;
   ディスプレイ: フレックス;
   位置: 相対的;
  }
  。アイテム {
   フレックス: 1;
   幅: 400ピクセル;
   高さ: 300px;
  }
  .item1 {
   背景色: ローズブラウン;
  }
  .item2 {
   背景色: rgb(12, 226, 37);
  }
  .item3 {
   背景色: rgb(212, 221, 29);
  }
  .item4 {
   背景色: rgb(61, 27, 182);
  }
  .item5 {
   背景色: rgb(221, 23, 145);
  }
  ＃鍵 {
   幅: 400ピクセル;
   高さ: 300px;
   マージン: 0 自動;
  }
  #リスト{
   幅: 400ピクセル;
   高さ: 40px;
   ディスプレイ: フレックス;
   コンテンツの中央揃え: 中央;
  }
  #リストdiv{
   上マージン: 10px;
   左マージン: 10px;
   幅: 20px;
   高さ: 20px;
   背景色: rgb(13, 162, 221);
   テキスト配置: 中央;
   境界線の半径: 45%;
   不透明度: 0.6;
  }
  #リスト div:hover {
   カーソル: ポインタ;
   不透明度: 1;
  }
  #ボタン{
   幅: 400ピクセル;
   テキスト配置: 中央;
  }
 </スタイル>

var wrap = document.getElementById('wrap');
var nowleft = -400; //現在のリストの left の値を格納するために使用されますvar currIndex = 1; //現在の画像番号を格納するために使用されます//複数のボタンを検索var btnNum = document.getElementsByClassName('btnNum'); //小さな円var right = document.getElementsByClassName('right')[0]; //右にスライドするボタンvar left = document.getElementsByClassName('left')[0]; //左にスライドするボタン

関数 next() {
  setInterval(function() { // 画像を 2 秒ごとに切り替えます wrap.style.transition = 'left 1s' // トランジションのスライド効果を設定します nowleft = parseInt(wrap.style.left) - 400; // 一度切り替えた後、nowleft は画像 1 枚分の幅だけ縮小されます (つまり、左にスライドします) wrap.style.left = nowleft + 'px'; // 次に、nowleft を wrap の left 属性に割り当てますif(parseInt(wrap.style.left) == -2400) { // 最後の 1 つを判断した後、こっそりと最初に戻ります setTimeout(() => {
       wrap.style.transition = 'none' // こっそりと元に戻るので、トランジション効果をキャンセルする必要があります nowleft = -400;
       wrap.style.left = nowleft + 'px'
      },1200) // タイマー時間が遷移時間より大きく、各回転の時間より短いことを確認します}
  },2000)
}

right.addEventListener('click',function() {
  if(nowleft >= -2000){ //最後の画像かどうかを判断し、そうでない場合はスライドを開始します nowleft -= 400;
   wrap.style.transition = '左1秒';
   wrap.style.left = nowleft + 'px';
  }
  if(nowleft == -2400) { //最後の画像に到達したら、秘密裏に最初の画像に戻ります setTimeout(() => {
    wrap.style.transition = 'なし';
    今左 = -400;
    wrap.style.left = nowleft + 'px';
   },1020)
  }
})

for(i = 0; i < btnNum.length; i++) {
  btnNum[0].style.opacity = 1;
  btnNum[i].addEventListener('click',function() {
   wrap.style.transition = '左1秒';
   for(j = 0; j < btnNum.length; j++) {
    btnNum[j].style.opacity = '0.6';
   }
   btnNum[i].style.opacity = 1;
   nowleft = nowleft - (i+1 - currIndex)*400;
   currIndex = i + 1;
   wrap.style.left = nowleft + 'px';
})