HTML ist eine Auszeichnungssprache, mit der Sie verschiedene Elemente auf einer Webseite erstellen können. Es ist ein sehr flexibles und leistungsfähiges Werkzeug, mit dem Sie interaktive und schöne Inhalte erstellen können. Ein solches Element kann eine Diashow sein, die ohne JavaScript in HTML erstellt werden kann.
Im Gegensatz zu JavaScript können Sie mit HTML statische Elemente auf einer Seite erstellen. Statik ist nicht immer ein Nachteil, besonders wenn Sie eine einfache und schnelle Diashow erstellen müssen, ohne komplexe Animationen und Folienübergänge hinzuzufügen.
Um eine Diashow in HTML zu erstellen, benötigen Sie nur grundlegende Kenntnisse dieser Markupsprache und können mit dem Tag arbeiten , mit dem Bilder eingefügt werden sollen. Sie können mehrere Bilder auf einer Seite erstellen und sie nacheinander mit einfachem HTML-Code anzeigen.
Erstellen einer Diashow in HTML ohne JavaScript
Um eine Diashow in HTML ohne JavaScript zu erstellen, können Sie Element- und CSS-Animationen verwenden. Definieren Sie zuerst den Container, in dem die Folien angezeigt werden sollen:
Fügen Sie dann das folgende CSS hinzu, um die Diashow zu erstellen:
.slideshow .slideshow img .slideshow img:first-child .slideshow img.active @keyframes slide 20% < opacity: 1; >80% < opacity: 1; >100% < opacity: 0; >>.slideshow img:nth-child(1) .slideshow img:nth-child(2) .slideshow img:nth-child(3) Dieses CSS erstellt eine einfache Animation, die die Folien nach 9 Sekunden automatisch umschaltet. Sie können die Dauer der Animation anpassen, indem Sie Keyframes ( @keyframes ) für verschiedene Kinder des Diashow-Containers hinzufügen oder entfernen.
Nachdem Sie nun Ihre Diashow in HTML ohne JavaScript erstellt haben, können Sie sie zu jeder Webseite hinzufügen, indem Sie einfach den Code des Diashow-Containers und das entsprechende CSS einfügen.
HTML-Markup
Um eine Diashow in HTML ohne JavaScript zu erstellen, benötigen wir ein richtig strukturiertes Markup. Dazu verwenden wir HTML-Tags. Das Haupttag, das die Folien enthalten soll, ist das Tag
. Innerhalb dieses Tags werden wir Folien mit anderen HTML-Tags platzieren. In jeder Folie verwenden wir ein Tag , um das entsprechende Bild anzuzeigen. Jede Folie enthält ein eigenes Tag .
Neben dem Tag können wir auch andere HTML-Tags verwenden, um eine Folienbeschreibung oder eine Diashow-Steuertaste hinzuzufügen. Zum Beispiel können wir Tags verwenden
und
so fügen Sie jeder Folie einen Titel und Text hinzu. Wir können auch Tags verwenden, um Schaltflächen für die Diashow-Steuerung zu erstellen, z. B. "Vorherige Folie" und "nächste Folie".
Hinzufügen von Bildern
So erstellen Sie eine Tabelle mit Zellen für jedes Bild:
In diesem Beispiel haben wir eine Tabelle mit einer Zeile und drei Spalten erstellt. In jeder Zelle befindet sich ein Bild, das mit einem Tag angezeigt wird . Wir haben den Pfad zu jedem Bild mit dem src-Attribut angegeben und den alternativen Text mit dem alt-Attribut hinzugefügt.
Sie können so viele Zellen hinzufügen, wie Sie Bilder benötigen. Denken Sie daran, dass Sie auch die Größe von Bildern ändern und bei Bedarf weitere Attribute hinzufügen können.
Anwenden von CSS-Stilen
Sie können CSS-Stile verwenden, um eine Diashow in HTML ohne JavaScript zu erstellen. Mithilfe von Stilen können Sie das Aussehen der Folien, die Animation und die Position der Elemente auf der Seite festlegen.
Eine Möglichkeit, Stile für eine Diashow anzuwenden, besteht darin, ein CSS-Stylesheet zu verwenden. Um dies zu tun, müssen Sie einen Block innerhalb des Tags Ihres HTML-Dokuments erstellen.
Innerhalb dieses Blocks können Sie Stile für verschiedene Diashowelemente mithilfe von CSS-Selektoren definieren. Sie können beispielsweise die Hintergrundfarbe einer Folie, die Schriftart des Textes, die Elementgrößen und andere Eigenschaften festlegen.
Beispielstile zum Erstellen einer Diashow:
Im folgenden Beispiel werden die Stile für die Diashow-Wrapper mit einer Klasse definiert .slideshow und auch für Folien mit Klasse .slide . Hier legen Sie Eigenschaften fest, die die Größe und Position der Folien sowie die Animation des Übergangs zwischen den Folien definieren.
Sie können die Stildefinition auch in eine separate CSS-Datei einfügen und sie mit einem Tag an ein HTML-Dokument anhängen.
Übergänge animieren
Es gibt mehrere Möglichkeiten, HTML-Übergangsanimationen ohne JavaScript zu implementieren. Eine davon ist die Verwendung von CSS-Animationen.
Um eine Übergangsanimation zwischen Folien zu erstellen, können Sie die transition-Eigenschaft in CSS verwenden. Mit dieser Eigenschaft können Sie angeben, welche Stileigenschaften animiert werden sollen und welche Werte während der Animation angewendet werden sollen. Sie können beispielsweise den Übergang nach der Hintergrundfarbe und der Dauer der Animation festlegen.
Ein Beispiel für die Verwendung einer CSS-Animation zum Erstellen eines Folienübergangs sieht folgendermaßen aus:
Hier gibt die transition-Eigenschaft an, dass die background-color-Eigenschaft mit einer Animationszeit von 1 Sekunde animiert werden soll.
Nachdem Sie die Stile angepasst haben, können Sie den Folien eine Animation hinzufügen, indem Sie verschiedene Werte für die background-color-Eigenschaft in CSS festlegen:
Dadurch animiert das Skript den Übergang zwischen den Folien und ändert die Hintergrundfarbe entsprechend den angegebenen Werten.
Die Verwendung von CSS-Animationen ermöglicht es Ihnen, verschiedene Übergangseffekte zwischen Folien zu erstellen, die ihnen Stil und Dynamik verleihen.
Navigation hinzufügen
Um einer Diashow Navigation hinzuzufügen, können wir Tabellenelemente verwenden. Erstellen Sie eine neue Zeile in der Tabelle unter jeder Folie und fügen Sie jeder Zelle dieser Zeile Navigationsschaltflächen hinzu. Jede Schaltfläche hat eine Art Foliennummer, die als Referenz auf die entsprechende Folie dient. Hier ist ein Beispielcode:
In diesem Beispiel werden der Tabelle nach jeder Folie Navigationsschaltflächen hinzugefügt. Jede Schaltfläche hat eine eindeutige Nummer, die der Foliennummer entspricht. Die Funktion currentSlide() wird aufgerufen, wenn Sie auf die Schaltfläche klicken, und zeigt die Folie mit der angegebenen Nummer an.
Jetzt, da die Navigation hinzugefügt wurde, kann der Benutzer einfach zwischen den Folien wechseln, indem er auf die Schaltflächen klickt.
