Lieben Sie es, schöne Fotos oder besondere Momente aus Ihrem Leben in Form einer Diashow zu betrachten? In diesem Artikel werden wir uns ansehen, wie Sie eine automatische Diashow erstellen können, die Bilder ändert, ohne dass Sie eine Schaltfläche drücken müssen.
Um eine automatische Diashow zu erstellen, müssen Sie eine HTML-Auszeichnungssprache verwenden, mit der Sie eine Webseitenstruktur erstellen können. Um eine Diashow zu erstellen, benötigen Sie eine bestimmte Anzahl von Bildern, die sich in einem bestimmten Zeitintervall untereinander ändern.
Erstellen Sie zunächst einen Container für die Diashow mit dem Element . Erstellen Sie dann innerhalb dieses Containers ein Element für jedes Bild, das Sie in die Diashow aufnehmen möchten. Vergessen Sie nicht, eindeutige IDs für jedes Bild mithilfe eines Attributs festzulegen id.
Erstellen einer automatischen Diashow
Sie benötigen HTML und JavaScript, um eine automatische Diashow zu erstellen. Zuerst werden wir einen Container für unsere Folien erstellen. Dazu können Sie ein Element mit einer eindeutigen ID verwenden.
Fügen Sie dann ein Skript hinzu, das die Folien nach einem bestimmten Zeitintervall automatisch umschaltet. Wir verwenden die setInterval-Funktion, um alle paar Sekunden die Folienumschaltfunktion aufzurufen.
In diesem Skript verwenden wir die querySelectorAll-Methode, um alle Bilder innerhalb des Diashow-Containers zu finden. Dann erstellen wir eine Variable currentSlide, um die aktuelle Folie zu verfolgen. Die nextSlide-Funktion blendet die aktuelle Folie aus und zeigt die nächste Folie mithilfe der display-Eigenschaft an. Schließlich rufen wir alle 3 Sekunden die Funktion nextSlide mit der setInterval-Methode auf.
Jetzt haben Sie eine automatische Diashow, ohne eine Schaltfläche drücken zu müssen. Sie können das Folienumschaltintervall anpassen und eine Stilisierung hinzufügen, um die Diashow für die Benutzer attraktiver zu machen.
Anmerkung: Denken Sie daran, allen Bildern in Ihrer Diashow ein Alt-Attribut hinzuzufügen, um eine bessere Verfügbarkeit zu erzielen.
Erforderliche Software
Um eine automatische Diashow zu erstellen, ohne auf eine Schaltfläche zu klicken, benötigen Sie die folgenden Programme:
1. Ein Texteditor oder eine integrierte Entwicklungsumgebung (IDE), z. B. Sublime Text, Visual Studio Code oder Atom. Sie ermöglichen es Ihnen, HTML-Dateien zu erstellen und zu bearbeiten, die den Code für die Diashow enthalten.
2. Webbrowser - Die beliebteste Wahl ist Google Chrome, Firefox oder Safari. Der Browser führt Ihren HTML-Code aus und zeigt eine automatische Diashow an.
3. Der Code zum Erstellen einer Diashow ist HTML, CSS und JavaScript. HTML definiert die Struktur einer Diashow, CSS definiert ihre visuelle Darstellung und JavaScript fügt Funktionalität hinzu, damit die Folien automatisch umgeschaltet werden, ohne auf eine Schaltfläche zu klicken.
4. Lokaler Server - Sie können einen lokalen Server wie XAMPP oder MAMP verwenden, um eine Diashow auf Ihrem Computer auszuführen. Mit dem lokalen Server können Sie die Folien basierend auf dem von Ihnen erstellten Code im Browser anzeigen.
5. Optional: bildbearbeitungsprogramm - Wenn Sie Ihrer Diashow Bilder hinzufügen möchten, benötigen Sie möglicherweise Software wie Adobe Photoshop oder GIMP, um die Bilder zu bearbeiten und zu optimieren, bevor Sie sie dem Code hinzufügen.
Auswählen von Bildern für die Diashow
Das Erstellen einer automatischen Diashow ohne Klicken auf eine Schaltfläche beginnt mit der Auswahl der Bilder, die Sie verwenden möchten. Es gibt mehrere Optionen hier:
- Verwenden Sie Ihre eigenen Bilder. Sie können Fotos, Zeichnungen oder andere Bilder verwenden, die Sie selbst erstellt oder heruntergeladen haben.
- Nutzen Sie kostenlose Ablaufbilder. Es gibt viele Websites, auf denen Sie kostenlose Bilder wie Freepik, Unsplash oder Pixabay finden können.
- Kaufen Sie Bilder mit Nutzungsrecht. Wenn Sie bestimmte Bilder benötigen oder sicher sein möchten, dass Sie das Recht haben, die Bilder ohne Einschränkungen zu verwenden, können Sie sie auf dedizierten Plattformen wie Shutterstock oder Adobe Stock kaufen.
- Verwenden Sie vorgefertigte Diashowvorlagen. Wenn Sie sich nicht um die Auswahl und Verarbeitung von Bildern kümmern möchten, können Sie die vorgefertigten Diashow-Vorlagen verwenden, die von einigen Diensten angeboten werden.
Egal, welche Option Sie wählen, entscheiden Sie sich für das Thema und die Stimmung der Diashow, um sicherzustellen, dass die ausgewählten Bilder Ihren Wünschen und Bedürfnissen entsprechen.
Anpassen der Diashow-Einstellungen
Sie können verschiedene Attribute im Tag verwenden, um die Einstellungen für die Diashow anzupassen . Hier sind einige der häufigsten Parameter:
src - pfad zum Bild. Gibt die URL des Bildes an, das in der Diashow angezeigt werden soll.
alt - alternativer Text. Legt den Text fest, der angezeigt wird, wenn ein Bild aufgrund eines Fehlers nicht geladen oder gelesen werden kann.
title - Vorsagen. Legt den Text fest, der in der Quickinfo angezeigt wird, wenn Sie den Mauszeiger über das Bild bewegen.
width und height - breite und Höhe des Bildes. Legt die Bildgröße in Pixeln fest.
style - stilisieren Sie das Bild. Ermöglicht das Festlegen von Stilen für das Bild, z. B. Hintergrundfarbe, Rahmen und andere Effekte.
Passen Sie Ihre Diashow-Einstellungen mit diesen Attributen an, um eine einzigartige und interessante Diashow für Ihre Website zu erstellen.
Automatisches Folienumschalten hinzufügen
Um eine automatische Folienumschaltung zu erstellen, ohne auf eine Schaltfläche zu klicken, müssen Sie JavaScript verwenden. Hier sind einige Schritte, die Ihnen helfen, diese Funktion zu Ihrer Diashow hinzuzufügen:
- Definieren Sie im HTML-Code einen Container für die Folien, z. B. mithilfe eines Elements .
- Fügen Sie mithilfe des Elements Bilder in den Container ein
indem Sie ihnen die entsprechenden Attribute wie src , um den Pfad zum Bild anzugeben, und alt, um sie zu beschreiben.
- Erstellen Sie Variablen, um den aktuellen Folienindex zu speichern und die Umschaltverzögerung zu verzögern.
- Erstellen Sie eine Funktion, mit der die Folien in bestimmten Abständen umgeschaltet werden.
- Verwenden Sie innerhalb der Funktion JavaScript-Methoden, um den aktuellen Index der Folie zu ändern und das entsprechende Bild anzuzeigen.
- Verwenden Sie einen JavaScript-Timer, um die Funktion zum automatischen Umschalten von Folien in bestimmten Zeitintervallen aufzurufen.
Hier ist ein JavaScript-Beispielcode, der eine automatische Folienumschaltung auf einer Seite hinzufügt:
var currentSlide = 0;var delay = 3000; // задержка переключения слайдов (в миллисекундах)function switchSlides() // Автоматическое переключение слайдов через заданную задержкуsetInterval(switchSlides, delay);Denken Sie daran, dieses Skript mit dem Element an Ihre HTML-Seite anzuhängen und das src-Attribut mit dem JavaScript-Dateipfad anzugeben.
Das Hinzufügen eines automatischen Folienwechsels wird Ihre Diashow für die Zuschauer dynamischer und attraktiver machen.
Veröffentlichen und Anpassen einer Diashow auf der Website
Um eine Diashow auf Ihrer Website zu veröffentlichen, müssen Sie HTML-Code und CSS-Stile verwenden. Beginnen Sie mit dem Erstellen eines Containers für Ihre Diashow. Sie können dazu ein Tag oder ein anderes geeignetes Element verwenden.
Als nächstes müssen Sie die Bilder hinzufügen, die in Ihrer Diashow Folien werden. Fügen Sie für jede Folie ein Tag hinzu und geben Sie den Pfad zum Bild im src-Attribut an.
Jetzt, da Sie den Container und die Bilder haben, können Sie mit dem Einrichten der Diashow beginnen. Dazu können Sie JavaScript oder CSS-Animationen verwenden.
Wenn Sie JavaScript verwenden möchten, erstellen Sie eine Funktion, die die Folien in einem bestimmten Zeitintervall umschaltet. Verwenden Sie innerhalb einer Funktion DOM-Methoden, um die Anzeige von Folien zu ändern. Möglicherweise müssen Sie ein Array oder ein Objekt verwenden, um Informationen über die Folien und die aktuell aktive Folie zu speichern.
Wenn Sie lieber CSS-Animationen verwenden möchten, benötigen Sie auch eine Funktion, mit der die Folien umgeschaltet werden, können jedoch stattdessen Animationen über CSS-Stile festlegen. Verwenden Sie dazu die animation- oder Transition-Eigenschaft, um den Übergangseffekt zwischen den Folien festzulegen.
Fügen Sie schließlich CSS-Stile zu Ihrer Diashow hinzu. Passen Sie die Größe, Position und andere Container- und Folienoptionen an, damit sie nach Bedarf angezeigt werden.
Nachdem Sie die Diashow eingerichtet haben, veröffentlichen Sie sie auf Ihrer Website, indem Sie den entsprechenden Seiten HTML-Code und CSS-Stile hinzufügen.
Jetzt funktioniert Ihre automatische Diashow, ohne auf eine Schaltfläche zu klicken, auf Ihrer Website. Stellen Sie sicher, dass die Folien in der richtigen Reihenfolge angezeigt werden und in einem bestimmten Zeitintervall umgeschaltet werden.
