So erstellen und durchlaufen Sie ein Array von Bildern in JavaScript

Um eine Folge von Bildern in einem Browser anzuzeigen, speichern Sie ihre Pfade in einem Array, halten Sie die ausgewählte Position in einem Index fest und weisen Sie den ausgewählten Pfad dem src eines Bildelements zu. Handler für „Zurück“ und „Weiter“ können den Index mit Modulo-Arithmetik aktualisieren, sodass die Navigation an beiden Enden eines nicht leeren Arrays weiterläuft. Dieses Muster funktioniert sowohl mit vorhandenen Bildelementen als auch mit Elementen, die von JavaScript erstellt werden.

Image-Objekte verwenden, um ein Array von Bildern in JavaScript anzuzeigen

Der Image-Konstruktor des Browsers erstellt ein Bildobjekt. Setzen Sie das src jedes Objekts auf einen lokalen Bildpfad und speichern Sie die Objekte dann in der Reihenfolge, in der sie angezeigt werden sollen. Der src-Wert identifiziert die Bilddatei; das sichtbare <img>-Element kann das src des ausgewählten Objekts als seine eigene Quelle verwenden.

Halten Sie die ausgewählte Position in einem Index fest, der bei 0 beginnt. Mit images als Array lautet die Vorwärtsformel (index + 1) % images.length und die Rückwärtsformel (index - 1 + images.length) % images.length. Die erste Formel wechselt vom letzten Element zum ersten; die zweite wechselt vom ersten Element zum letzten. Beide Formeln setzen voraus, dass das Array mindestens ein Bild enthält und dass der Startindex im gültigen Bereich liegt.

Initialisieren Sie das sichtbare Element aus dem src des ersten Objekts, bevor Sie die Navigationssteuerelemente verbinden. Wenn ein Steuerelement ausgewählt wird, aktualisieren Sie den Index und kopieren Sie dann das src des ausgewählten Objekts in das sichtbare Element. Halten Sie die lokalen Pfade konsistent mit der URL der Seite und den Speicherorten der Bilddateien.

Ein Array von Bildpfaden verwenden, um Bilder in JavaScript anzuzeigen

Ein Array von Strings ist eine einfache Möglichkeit, Bildpfade in Anzeigereihenfolge zu halten. Das folgende Beispiel verwaltet einen Index und gibt den Pfad zurück, den jede Navigationsfunktion auswählt. Es ist ein eigenständiges JavaScript-Beispiel; Ausführungsnachweise wurden für diesen Entwurf nicht bereitgestellt.

const images = [
  "./images/classroom.jpg",
  "./images/animals.jpg",
  "./images/nature.jpg"
];
let index = 0;

const nextImage = () => {
  index = (index + 1) % images.length;
  return images[index];
};

const previousImage = () => {
  index = (index - 1 + images.length) % images.length;
  return images[index];
};

console.log(nextImage());
console.log(previousImage());

Platzieren Sie in einer Seite ein Bildelement in einem Container wie <div id="content"></div>. Initialisieren Sie dessen src mit images[index]; nachdem eine der beiden Navigationsfunktionen den Index aktualisiert hat, weisen Sie den neuen Wert von images[index] dem src desselben Elements zu. Die Pfade im Beispiel sind Platzhalter, ersetzen Sie sie also durch Dateien, die Ihre Seite laden kann. Das Array muss mindestens einen Pfad enthalten, und der Anfangsindex muss auf einen seiner Einträge zeigen.

DOM-Methoden verwenden, um ein Array von Bildern in JavaScript anzuzeigen

JavaScript kann das angezeigte <img>-Element erstellen, statt es im ursprünglichen HTML zu verlangen. Platzieren Sie zuerst einen Zielcontainer in der Seite, zum Beispiel <div id="imageContainer"></div>. Holen Sie ihn dann mit document.getElementById("imageContainer"), erstellen Sie ein Bild mit document.createElement("img"), setzen Sie das src des Bildes auf den ersten Pfad und fügen Sie es mit imageContainer.appendChild(img) an.

Halten Sie das erstellte Element und den aktuellen Index für die Handler „Zurück“ und „Weiter“ verfügbar. Jeder Handler berechnet den nächsten Index mit den oben genannten Umlaufformeln und aktualisiert das src desselben Elements. Dadurch wird ein Bildelement erstellt und wiederverwendet, während sich der ausgewählte Pfad ändert. Der Container muss vor der Initialisierung vorhanden sein; platzieren Sie das Skript hinter dem Container oder initialisieren Sie es in einem DOMContentLoaded-Handler. Dieser Abschnitt verwendet DOM-Methoden direkt und kein HTML-Template-Element.

Moderne JavaScript-Funktionen verwenden, um ein Array von Bildern in JavaScript anzuzeigen

Die Beispiele verwenden const für Bindungen, die nicht neu zugewiesen werden, let für den sich ändernden Index und Pfeilfunktionen-Syntax wie const nextImage = () => { ... }. Diese beschreiben die in den Beispielen verwendete Syntax; eine Aussage zur Laufzeitkompatibilität wird hier nicht getroffen.

Initialisieren Sie bei einem Viewer mit zwei Richtungen den Index, bevor Sie den ersten Pfad rendern. Sobald das Ziel-Bildelement existiert, setzen Sie sein anfängliches src aus dem Array. Geben Sie den Steuerelementen „Weiter“ und „Zurück“ Handler, die den Index mit den obigen Formeln aktualisieren und dann das angezeigte src auffrischen. Dieser Ansatz verwendet ein Array und einen Index zur Navigation; er verwendet kein forEach.

Fazit

Verwenden Sie ein Array von Image-Objekten, wenn Sie Bildobjekte im Voraus erstellen möchten, oder behalten Sie ein Array von Pfaden und aktualisieren Sie ein sichtbares Bild, wenn sich die Auswahl ändert. DOM-Methoden sind nützlich, wenn JavaScript das Bildelement in einem Container erstellen soll. Für welchen Ansatz Sie sich auch entscheiden: Initialisieren Sie das angezeigte Bild, halten Sie seinen Index mit dem Array abgestimmt und verwenden Sie Umlaufformeln für die Vorwärts- und Rückwärtsnavigation.