Mehrere Methoden zur Implementierung von Karussellbildern in JS

<Text>
 <div id="Behälter"> /*Behälter*/
  <div id="wrap" style="left: -400px;"> /*Liste der Bilder*/
   <div Klasse="Artikel Artikel5">l5</div>
   <div Klasse="Artikel Artikel1">1</div>
   <div Klasse="Artikel Artikel2">2</div>
   <div Klasse="Artikel Artikel3">3</div>
   <div Klasse="Artikel Artikel4">4</div>
   <div Klasse="Artikel Artikel5">5</div>
   <div Klasse="Artikel Artikel1">r1</div>
  </div>
 </div>
 <div id="key"> /*Schaltfläche festlegen*/   
  <div id="list"> /*Klicken Sie auf den kleinen Kreis, um zu einem festen Bild zu wechseln*/
   <div Klasse="btn1 btnNum">1</div>
   <div Klasse="btn2 btnNum">2</div>
   <div Klasse="btn3 btnNum">3</div>
   <div class="btn4 btnNum">4</div>
   <div class="btn5 btnNum">5</div>
  </div>
  <div id="btn"> /*Buttons zum Umschalten nach links und rechts*/
   <button class="links">←</button>
   <button class="rechts">→</button>
  </div>
 </div>
</body>

<Stil>
  #Behälter {
   Breite: 400px;
   Höhe: 300px;
   Rand: 8px rgb(8, 8, 8) durchgezogen;
   Rand: 0 automatisch;
   Rand oben: 150px;
   Überlauf: versteckt;
   Position: relativ;
  }
  #wickeln {
   Breite: 2800px;
   Höhe: 300px;
   Anzeige: Flex;
   Position: relativ;
  }
  .Artikel {
   biegen: 1;
   Breite: 400px;
   Höhe: 300px;
  }
  .Artikel1 {
   Hintergrundfarbe: rosabraun;
  }
  .item2 {
   Hintergrundfarbe: rgb(12, 226, 37);
  }
  .item3 {
   Hintergrundfarbe: rgb(212, 221, 29);
  }
  .item4 {
   Hintergrundfarbe: rgb(61, 27, 182);
  }
  .item5 {
   Hintergrundfarbe: rgb(221, 23, 145);
  }
  #Schlüssel {
   Breite: 400px;
   Höhe: 300px;
   Rand: 0 automatisch;
  }
  #Liste {
   Breite: 400px;
   Höhe: 40px;
   Anzeige: Flex;
   Inhalt ausrichten: zentriert;
  }
  #Liste div {
   Rand oben: 10px;
   Rand links: 10px;
   Breite: 20px;
   Höhe: 20px;
   Hintergrundfarbe: rgb(13, 162, 221);
   Textausrichtung: zentriert;
   Randradius: 45 %;
   Deckkraft: 0,6;
  }
  #Liste div:hover {
   Cursor: Zeiger;
   Deckkraft: 1;
  }
  #btn {
   Breite: 400px;
   Textausrichtung: zentriert;
  }
 </Stil>

var wrap = document.getElementById('wrap');
var nowleft = -400; //Wird verwendet, um den Wert von left in der aktuellen Liste zu speichernvar currIndex = 1; //Wird verwendet, um die aktuelle Bildnummer zu speichern//Mehrere Schaltflächen suchenvar btnNum = document.getElementsByClassName('btnNum'); //Kleiner Kreisvar right = document.getElementsByClassName('right')[0]; //Schaltfläche zum Verschieben nach rechtsvar left = document.getElementsByClassName('left')[0]; //Schaltfläche zum Verschieben nach links

Funktion nächstes() {
  setInterval(function() { //Bild so einstellen, dass es alle zwei Sekunden wechselt wrap.style.transition = 'left 1s' //Übergangs-Gleiteffekt einstellen nowleft = parseInt(wrap.style.left) - 400; //Nach einmaligem Wechsel soll nowleft um die Breite eines Bildes verkleinert werden (also nach links gleiten), wrap.style.left = nowleft + 'px'; //Dann nowleft dem linken Attribut von wrapif(parseInt(wrap.style.left) == -2400) { zuweisen //Nach der Beurteilung des Letzten heimlich zum Anfang zurückwechseln setTimeout(() => {
       wrap.style.transition = 'none' //Da die Rückänderung heimlich erfolgt, muss der Übergangseffekt jetzt abgebrochen werdenleft = -400;
       wrap.style.left = jetztlinks + 'px'
      },1200) // Stellen Sie sicher, dass die Timerzeit größer als die Übergangszeit und kleiner als die Zeit jeder Rotation ist}
  },2000)
}

right.addEventListener('klicken',function() {
  if(nowleft >= -2000){ //Beurteilen, ob es das letzte Bild ist, wenn nicht, mit dem Gleiten beginnen nowleft -= 400;
   Wrap.Style.Transition = "links 1 Sek.";
   wrap.style.left = jetztlinks + 'px';
  }
  if(nowleft == -2400) { //Wenn wir das letzte Bild erreichen, wechseln wir heimlich zurück zum ersten Bild setTimeout(() => {
    Wrap.Style.Transition = "keine";
    jetztlinks = -400;
    wrap.style.left = jetztlinks + 'px';
   },1020)
  }
})

für(lass i = 0; i < btnNum.Länge; i++) {
  btnNum[0].style.opacity = 1;
  btnNum[i].addEventListener('klicken',function() {
   Wrap.Style.Transition = "links 1 Sek.";
   für(let j = 0; j < btnNum.length; j++) {
    btnNum[j].style.opacity = "0,6";
   }
   btnNum[i].style.opacity = 1;
   jetztlinks = jetztlinks – (i+1 – aktuellerIndex)*400;
   aktuellerIndex = i + 1;
   wrap.style.left = jetztlinks + 'px';
})