JavaScript-Diashow mit Funktionen

• April 20, 2024

In früheren Artikeln haben wir eine sehr einfache JavaScript-Diashow erstellt und einige Feinabstimmungen vorgenommen. Diese Diashow ist voll funktionsfähig und zeigt sogar etwas an, das für Personen geeignet ist, die kein JavaScript haben. Ich möchte jedoch, dass die Miniaturansicht des aktuell angezeigten Bilds anders aussieht als die anderen Miniaturansichten. Ich hatte mich für eine CSS-ID namens "current" entschieden, die Bilder halbtransparent machte und einen dünnen roten Rand für das ausgewählte Miniaturbild hinzufügte. In meinem letzten Artikel hatte ich dieses Verhalten für das ursprünglich ausgewählte Miniaturbild erhalten, aber als ich ein neues Miniaturbild auswählte, änderte sich das neue Miniaturbild nicht und das ursprüngliche Miniaturbild behielt das ausgewählte Design bei.

Wenn in der vorherigen Version meiner Diashow ein Benutzer auf eine Miniaturansicht klickt, werden die zugehörigen großen Bilder angezeigt. Ich möchte, dass das große Bild geändert wird, die Miniaturansicht des zuvor ausgewählten Bilds so eingestellt wird, dass sie wieder normal ist, und dass diese Miniaturansicht mit dem speziellen Stil für das ausgewählte Bild angezeigt wird. Da ich jetzt mehrere Dinge mache, wenn auf das Miniaturbild geklickt wird, habe ich nicht mehr meinen gesamten Code in das onClick-Attribut des eingefügt img Tag zur Verwendung einer Funktion. JavaScript-Funktionen gehen normalerweise in die Kopf Abschnitt des HTML-Codes, damit sie geladen und bereit sind, wenn der Hauptteil der Seite geladen wird. Sie können entweder direkt dazwischen eingefügt werden Skript Tags oder Put und eine Datei und enthalten. Bei kurzen Programmen oder wenn ich aktiv codiere, fällt es mir leichter, meinen Code wie hier direkt auf der Seite zu platzieren.

Ich hätte eine Funktion für jedes Miniaturbild verwenden können, aber da sich von Miniaturbild zu Miniaturbild nur der Name des Bildes und die ID des Miniaturbilds ändern (und ich den Bildnamen für die ID verwendet habe), habe ich eine einzelne Funktion geschrieben, die das verwendet id als Argument und verwendet, um den entsprechenden Bildnamen durch Hinzufügen von ".jpg" zu erstellen. Ich habe meine Funktion angerufen displayLarge.

Funktion displayLarge (id) {
// ändere das große Bild
imageName = id + ".jpg";
document.getElementById ("largeImage"). src = imageName;
// setze den Stil der vorherigen Miniaturansicht auf den Standard zurück
document.getElementById ("current"). id = oldID;
// notiere die ID bevor wir sie ändern
oldID = id
// Markiere das Vorschaubild als aktuell mit dem aktuellen Stil
document.getElementById (id) .id = "current";
}

Damit diese Funktion zum ersten Mal funktioniert, musste ich auch eine erste Definition für angeben oldID, die Variable, die ich verwende, um die ursprüngliche ID der aktuell ausgewählten Miniaturansicht zu speichern. Der gesamte Code befindet sich im Kopfbereich der Webseite, sodass er vor dem Laden der Seite geladen wird.

Schließlich habe ich den HTML-Code für die Miniaturansichten geändert, um meine Funktion aufzurufen. Das HTML für meine Diashow sieht jetzt so aus:











Ein funktionierendes Beispiel für diesen Code finden Sie hier.

Video-Anleitungen: Simple JavaScript Slideshow In 5 Minutes (April 2024).