JavaScript-Diashow mit CSS

• April 19, 2024

In einem früheren Artikel haben wir eine sehr einfache JavaScript-Diashow erstellt. Diese Diashow ist voll funktionsfähig und zeigt sogar etwas an, das für Leute geeignet ist, die kein JavaScript haben, aber nicht alle Funktionen, die ich für meine Website haben möchte. Insbesondere möchte ich, dass die Miniaturansicht des Bildes, das ich gerade anzeige, irgendwie anders aussieht als die anderen Miniaturansichten. Da Stile ein guter Weg sind, um dies zu erreichen, werde ich zunächst alle Attribute in meinem vorhandenen HTML in CSS konvertieren.

Zuerst habe ich mein vorhandenes Styling auf CSS umgestellt. Wenn Sie mit CSS nicht vertraut sind, können Sie am einfachsten damit experimentieren, indem Sie es dazwischen legen Stil Tags im Kopf Ihres HTML-Dokuments. Das anfängliche Tag benötigt ein type-Attribut, um dem Browser mitzuteilen, welche Art von Stilinformationen Sie verwenden. Daher sollte dies folgendermaßen aussehen:



Die anfängliche Konvertierung in CSS war einfach, da nur das große Bild Stilinformationen enthielt und bereits eine Ich würde Attribut, das für JavaScript-Zwecke verwendet wurde.

#largeImage {
Rand: 2px festes Schwarz;
Breite: 544px;
Höhe: 408px;
}

Ich hatte zuvor keine Größeninformationen für die Miniaturansichten angegeben, aber ich habe eine Klasse namens hinzugefügt Daumen und setzen Sie Bild-Tags in dieser Klasse, um die Größe auf 40 x 40 Pixel festzulegen. Dies bedeutet, dass Bilder, die versehentlich zu groß oder zu klein für Miniaturansichten sind, auch in Miniaturbildgröße angezeigt werden müssen.

img.thumbs {
Grenze: keine;
Breite: 40px;
Höhe: 40px;
}

Ich habe auch eine hinzugefügt Diashow Klasse, um die gesamte Diashow zu halten. Auf diese Weise kann ich beispielsweise einen Rahmen hinzufügen oder die Hintergrundfarbe für die gesamte Diashow ändern, wenn ich dies wünsche. An dieser Stelle verwende ich es nur, um die maximale Höhe auf die Höhe des großen Bildes festzulegen, da ich beim Hinzufügen weiterer Miniaturansichten möchte, dass diese auf der Seite des großen Bildes bleiben, anstatt sich darüber zu bewegen. Leider unterstützt Internet Explorer das Attribut max-height nicht, sodass ich später noch weiter auf dieses Problem eingehen muss.

.slideshow {
Höhe: 408px;
maximale Höhe: 408px;
}

Schließlich habe ich einen Stil für das ausgewählte Miniaturbild erstellt. Ich entschied, dass mein ausgewähltes Miniaturbild halbtransparent sein und einen schmalen roten Rand haben soll. Da jeweils nur ein Bild ausgewählt wird, habe ich beschlossen, für diesen Zweck eine ID namens "current" zu verwenden. Der Vorteil der Verwendung von CSS ist, dass ich jederzeit ändern kann, wie es aussehen wird, ohne den Code zu ändern. Der Stil sieht so aus:

img # current {
Rand: 1px durchgehend rot;
Filter: Alpha (Deckkraft = 50);
-Moz-Opazität: 0,5;
Opazität: 0,5;
}

Hier sehen wir etwas Code, um Browserunterschiede wieder zu behandeln. Der Standard fordert die Verwendung eines Opazitätselements, aber sowohl IE- als auch Mozilla-basierte Browser unterstützen dies noch nicht.

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









Wir haben unser JavaScript nicht geändert, daher funktioniert die Diashow immer noch, aber jetzt haben wir mehr Stil und unsere Präsentation ist von unserem HTML und JavaScript getrennt. Wir haben jedoch ein Problem: Das ursprünglich ausgewählte Miniaturbild ist zwar halbtransparent mit einem roten Rand, bleibt jedoch beim Ändern von Bildern so. Um dies zu beheben, müssen wir uns wieder unserem alten Freund JavaScript zuwenden.

Hier sehen Sie ein funktionierendes Beispiel für den bisherigen Code.

Video-Anleitungen: How to code a carousel with HTML, CSS and JavaScript - from scratch (part 1) (April 2024).