JavaScript zum Wechseln zwischen mehreren Bildern

<Text>
 <div Klasse="äußere">
  <p id="info"></p>
  <img src="./images/banner1.png" alt="Bild" title="Bild">

  <button id='prev'>Zurück</button>
  <button id='next'>Weiter</button>
 </div>

</body>

<Stil>
  * {
   Polsterung: 0;
   Rand: 0;
  }

  .äußeres {
   Breite: 1000px;
   Hintergrundfarbe: #bfa;
   Rand: 50px automatisch;
   Textausrichtung: zentriert;
   Polsterung: 10px;
  }

  img {
   Breite: 900px;
   Anzeige: Block;
   Rand: 0 automatisch;
  }

  Taste {
   Rand: 5px;
  }
</Stil>

<Skript>
  //Lade das Dokument window.onload = function () {
   //Img-Tag abrufen var img = document.getElementsByTagName("img")[0];
   
   //Erstellen Sie ein Array, um die Pfade aller Bilder zu speichern //Legen Sie hier den Pfad der Bilddatei fest var imgArr = ["./images/banner1.png", "./images/banner2.png", "./images/banner3.png", "./images/banner4.png", "./images/banner5.png"];
   //Setze den Anfangswert des Bildes var index = 0;
   //Holen Sie sich das p-Tag mit den ID-Informationen var info = document.getElementById("info");
   info.innerHTML = "Gesamt" + imgArr.length + "Stück," + "Aktuell ist" + (Index + 1) + "Stück";

   //Zwei Schaltflächen binden //Vorheriges document.getElementById("prev").onclick = function () {
    Index--;
    //Überprüfen, ob der Index kleiner als 0 ist
    wenn (Index < 0) {
     index = imgArr.length - 1; //Schleife (erstes Bild -> letztes Bild)
    }
    img.src = imgArr[index];
    info.innerHTML = "Gesamt" + imgArr.length + "Stück," + "Aktuell ist" + (Index + 1) + "Stück";
   };
   //Weiter document.getElementById("next").onclick = function () {
    Index++;
    //Beurteilen, ob der Index größer ist als die Länge des Arrays - 1 (der maximale Index des Arrays)
    wenn (Index > Bildarr.Länge - 1) {
     index = 0; //Schleife (letztes Bild -> erstes Bild)
    }
    img.src = imgArr[index];
    info.innerHTML = "Gesamt" + imgArr.length + "Stück," + "Aktuell ist" + (Index + 1) + "Stück";
   }
  };

</Skript>