So erstellen Sie eine Diashow mit HTML, CSS und JavaScript

Eine Web-Diashow ist eine Folge von Bildern oder Texten, die darin besteht, ein Element der Folge in einem bestimmten Zeitintervall anzuzeigen.

Für dieses Tutorial können Sie eine Diashow erstellen, indem Sie die folgenden einfachen Schritte ausführen:

Schreiben Sie ein Markup

     Slideshow 

Schreiben Sie Stile, um Folien auszublenden und nur eine Folie anzuzeigen.

Um die Folien auszublenden, müssen Sie ihnen einen Standardstil geben. Es wird diktiert, dass Sie nur eine Folie anzeigen, wenn diese aktiv ist oder wenn Sie sie anzeigen möchten.

 [data-component="slideshow"] .slide { display: none; } [data-component="slideshow"] .slide.active { display: block; }

Ändern Sie die Folien in einem Zeitintervall.

Der erste Schritt zum Ändern der angezeigten Folien besteht darin, die Folienverpackung (en) und dann deren Folien auszuwählen.

Wenn Sie die Folien auswählen, müssen Sie über jede Folie gehen und eine aktive Klasse hinzufügen oder entfernen, abhängig von der Folie, die Sie anzeigen möchten. Dann wiederholen Sie den Vorgang einfach für ein bestimmtes Zeitintervall.

Beachten Sie, dass Sie eine aktive Klasse beim Entfernen von einer Folie aufgrund der im vorherigen Schritt definierten Stile ausblenden. Wenn Sie der Folie jedoch eine aktive Klasse hinzufügen, überschreiben Sie den Stil display:none to display:block, sodass die Folie den Benutzern angezeigt wird.

 var slideshows = document.querySelectorAll('[data-component="slideshow"]'); // Apply to all slideshows that you define with the markup wrote slideshows.forEach(initSlideShow); function initSlideShow(slideshow) { var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`); // Get an array of slides var index = 0, time = 5000; slides[index].classList.add('active'); setInterval( () => { slides[index].classList.remove('active'); //Go over each slide incrementing the index index++; // If you go over all slides, restart the index to show the first slide and start again if (index === slides.length) index = 0; slides[index].classList.add('active'); }, time); }

Codepen-Beispiel nach diesem Tutorial