カルーセル効果を実現するネイティブJavaScript

<div class="box">
 <img src="./image/banner1.jpg" />
 <div class="左矢印">
  <img src="./image/left.png" />
 </div>
 <div class="右矢印">
  <img src="./image/right.png" />
 </div>
 <ul class="button"></ul>
</div>

。箱 {
 幅: 300ピクセル;
 高さ: 200px;
 背景: #333;
 境界線の半径: 5px;
 オーバーフロー: 非表示;
 マージン: 0 自動;
 フォントサイズ: 0;
 位置: 相対的;
 ディスプレイ: フレックス;
 アイテムの位置を中央揃えにします。
}
 
.box:hover .arrows{
 表示: ブロック;
}
 
.box 画像{
 幅: 100%;
}
 
.矢印{
 幅: 20px;
 テキスト配置: 中央;
 位置: 絶対;
 上位: 50%;
 変換: translateY(-50%);
 zインデックス: 9;
 フォントサイズ: 30px;
 表示: なし;
}
 
。左{
 左: 10px;
}
 
。右{
 右: 10px;
}
 
。ボタン{
 リストスタイル: なし;
 マージン: 0;
 パディング: 0;
 ディスプレイ: フレックス;
 コンテンツの中央揃え: 中央;
 位置: 絶対;
 下: 10px;
 左: 50%;
 変換: translateX(-50%);
}
 
.ボタン li {
 幅: 20px;
 高さ: 5px;
 境界線の半径: 1px;
 背景: #fff;
 マージン: 0 2px;
}
 
。アクティブ {
 背景: 赤 !重要;
}

let count = 0 // 現在のカルーセルインデックスを作成する // DOM要素を取得する let box = document.querySelector('.box')
img = document.querySelector('img') とします。
left = document.querySelector('.left') とします。
右 = document.querySelector('.right') とします。
ul = document.querySelector('ul') とします。
 
// カルーセル画像配列 let imgArr = [
 './image/banner1.jpg',
 './image/banner2.jpg',
 './image/banner3.jpg',
 './image/banner4.jpg'
]
 
// 画像配列を走査し、対応する下部スイッチ li タグを追加します imgArr.forEach(() => {
 li = document.createElement('li') とします。
 ul.appendChild(li)
})
 
let lis = document.querySelectorAll('li') // すべてのliタグを取得 lis[0].className = 'active' // 最初のliタグに選択状態を追加 // スライドショーを切り替える function switchImg (type) {
 関数()を返す{
  if(type == 1) {
   if(count - 1 < 0) {
    カウント = imgArr.length - 1
   } それ以外 {
    カウント += -1
   }
  } それ以外 {
   if(count + 1 >= imgArr.length) {
    カウント = 0
   } それ以外 {
    カウント += 1
   }
  }
  img.src = imgArr[カウント]
  lis.forEach((v,i) => {
   lis[i].className = ''
   if(i == カウント) {
    lis[i].className = 'アクティブ'
   }
  })
 }
}
 
left.addEventListener('click', switchImg(1)) // 前のスライドショー right.addEventListener('click', switchImg(2)) // 次のスライドショー // スライドショーを切り替えるには、下の li タグをクリックします lis.forEach((value,index) => {
 lis[インデックス].addEventListener('クリック', () => {
  lis.forEach((v,i) => {
   lis[i].className = ''
  })
  カウント = インデックス
  img.src = imgArr[カウント]
  lis[count].className = 'アクティブ'
 })
})
// 2.5秒ごとに次のスライドに自動的に切り替わるタイマーを作成する let swiper = setInterval(() => {
 右クリック()
},2500)
//マウスが入り、自動切り替えを一時停止します。box.onmouseenter = () => {
 clearInterval(スワイパー)
}
//マウスを離すと自動切り替えが開始されます box.onmouseleave = () => {
 スワイパー = setInterval(() => {
  右クリック()
 },1500)
}