Natives JavaScript, um den Karusselleffekt zu erzielen

<div Klasse="Box">
 <img src="./image/banner1.jpg" />
 <div Klasse="Pfeile nach links">
  <img src="./bild/left.png" />
 </div>
 <div Klasse="Pfeile rechts">
  <img src="./bild/rechts.png" />
 </div>
 <ul Klasse="buttom"></ul>
</div>

.Kasten {
 Breite: 300px;
 Höhe: 200px;
 Hintergrund: #333;
 Rahmenradius: 5px;
 Überlauf: versteckt;
 Rand: 0 automatisch;
 Schriftgröße: 0;
 Position: relativ;
 Anzeige: Flex;
 Elemente ausrichten: zentrieren;
}
 
.box:hover .arrows{
 Anzeige: Block;
}
 
.box img{
 Breite: 100 %;
}
 
.Pfeile {
 Breite: 20px;
 Textausrichtung: zentriert;
 Position: absolut;
 oben: 50 %;
 transformieren: verschiebeY(-50%);
 Z-Index: 9;
 Schriftgröße: 30px;
 Anzeige: keine;
}
 
.links{
 links: 10px;
}
 
.Rechts{
 rechts: 10px;
}
 
.Taste{
 Listenstil: keiner;
 Rand: 0;
 Polsterung: 0;
 Anzeige: Flex;
 Inhalt ausrichten: zentriert;
 Position: absolut;
 unten: 10px;
 links: 50%;
 transformieren: übersetzenX(-50%);
}
 
.button li {
 Breite: 20px;
 Höhe: 5px;
 Rahmenradius: 1px;
 Hintergrund: #fff;
 Rand: 0 2px;
}
 
.aktiv {
 Hintergrund: rot !wichtig;
}

let count = 0 // Aktuellen Karussellindex erstellen // DOM-Element abrufen let box = document.querySelector('.box')
let img = document.querySelector('img')
linke Seite = document.querySelector('.left')
rechts lassen = document.querySelector('.right')
let ul = document.querySelector('ul')
 
// Karussell-Bild-Array let imgArr = [
 './bild/banner1.jpg',
 './image/banner2.jpg',
 './image/banner3.jpg',
 './bild/banner4.jpg'
]
 
// Durchlaufe das Bild-Array und füge den entsprechenden unteren Switch-li-Tag hinzu imgArr.forEach(() => {
 let li = document.createElement('li')
 ul.appendChild(li)
})
 
let lis = document.querySelectorAll('li') // Alle li-Tags abrufen lis[0].className = 'active' // Ausgewählten Status zum ersten li-Tag hinzufügen // Diashow-Funktion umschalten switchImg (Typ) {
 return Funktion() {
  wenn(Typ == 1) {
   wenn(Anzahl - 1 < 0) {
    Anzahl = imgArr.Länge - 1
   } anders {
    Anzahl += -1
   }
  } anders {
   wenn(Anzahl + 1 >= imgArr.Länge) {
    Anzahl = 0
   } anders {
    Anzahl += 1
   }
  }
  img.src = imgArr[Anzahl]
  lis.fürEach((v,i) => {
   lis[i].className = ''
   wenn(i == Anzahl) {
    lis[i].className = "aktiv"
   }
  })
 }
}
 
left.addEventListener('click', switchImg(1)) // Vorherige Diashow right.addEventListener('click', switchImg(2)) // Nächste Diashow // Klicken Sie auf das untere li-Tag, um die Diashow zu wechseln lis.forEach((value,index) => {
 lis[index].addEventListener('klicken', () => {
  lis.fürEach((v,i) => {
   lis[i].className = ''
  })
  Anzahl = Index
  img.src = imgArr[Anzahl]
  lis[Anzahl].className = "aktiv"
 })
})
// Einen Timer erstellen, um alle 2,5 Sekunden automatisch zur nächsten Folie zu wechseln let swiper = setInterval(() => {
 right.click()
},2500)
//Maus tritt ein und pausiert das automatische Umschalten box.onmouseenter = () => {
 Intervall löschen(Swiper)
}
//Maus rausziehen um automatisches Umschalten zu starten box.onmouseleave = () => {
 swiper = setzeInterval(() => {
  right.click()
 },1500)
}