JavaScript-Code erklären

Können Sie erklären, was dieser Code bewirkt und wie er funktioniert?

let currentSlide = 0;

function showSlide(index) {
  const slidesWrapper = document.querySelector('.slides-wrapper');
  const slides = document.getElementsByClassName("slide");

  if (index >= slides.length) currentSlide = 0;
  if (index < 0) currentSlide = slides.length - 1;

  slidesWrapper.style.transform = `translateX(-${currentSlide * 100}%)`;
}

function nextSlide() {
  currentSlide++;
  showSlide(currentSlide);
}

function prevSlide() {
  currentSlide--;
  showSlide(currentSlide);
}

window.onload = function() {
  showSlide(currentSlide);
  setInterval(nextSlide, 3000);
};

Hallo! Mit diesem JavaScript-Code wird eine einfache Diashow erstellt. Sehen wir uns das genauer an:

1. currentSlide = 0;: Damit wird eine Variable initialisiert, um die aktuell angezeigte Folie zu verfolgen. Sie beginnt bei 0 (der ersten Folie).

2. showSlide(index): Dies ist die Hauptfunktion. Es wird eine index verwendet, die die anzuzeigende Folie darstellt.

   • document.querySelector('.slides-wrapper'): Hier wird das Containerelement für alle Folien abgerufen (vermutlich ein <div> mit der Klasse „slides-wrapper“).
   • document.getElementsByClassName("slide"): Es werden alle Elemente mit der Klasse „slide“ abgerufen (vermutlich die einzelnen Folien).
   • if (index >= slides.length) currentSlide = 0;: Wenn der Index außerhalb des zulässigen Bereichs liegt (größer oder gleich der Anzahl der Folien), wird zur ersten Folie (Index 0) zurückgesprungen.
   • if (index < 0) currentSlide = slides.length - 1;: Wenn der Index kleiner als 0 ist, wird ebenfalls zur letzten Folie gewechselt.
   • slidesWrapper.style.transform =translateX(-${currentSlide * 100}%);: Dies ist die Schlüsselzeile. Dabei wird das slides-wrapper-Element mithilfe von CSS-Transformationen horizontal verschoben. Es wird davon ausgegangen, dass jede Folie 100% der Breite ihres Containers hat. Wenn Sie currentSlide mit 100% multiplizieren, wird der Container nach links verschoben und die entsprechende Folie wird angezeigt.

3. nextSlide(): Mit dieser Funktion wird currentSlide erhöht und showSlide() aufgerufen, um die nächste Folie anzuzeigen.

4. prevSlide(): Mit dieser Funktion wird currentSlide um eins verringert und showSlide() aufgerufen, um die vorherige Folie anzuzeigen.

5. window.onload = function() { ... }: So wird sichergestellt, dass der Code erst ausgeführt wird, nachdem die gesamte Seite geladen wurde.

   • showSlide(currentSlide);: Es wird zuerst die erste Folie angezeigt.
   • setInterval(nextSlide, 3000);: Dadurch wird ein Intervall eingerichtet, bei dem nextSlide() alle 3.000 Millisekunden (3 Sekunden) automatisch aufgerufen wird. So entsteht der automatische Diashoweffekt.

Im Wesentlichen verwendet der Code CSS-Transformationen für einen reibungslosen Übergang zwischen den Folien, wobei das Umbruchverhalten und die automatische Folienvorschau verwaltet werden. Es wird eine bestimmte HTML-Struktur mit einem Containerelement und Folienelementen vorausgesetzt. Der HTML-Code würde in etwa so aussehen:

<div class="slides-wrapper">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>