Sådan oprettes et lysbilledshow med HTML, CSS og JavaScript

Et web-diasshow er en sekvens af billeder eller tekst, der består i at vise et element i sekvensen i et bestemt tidsinterval.

Til denne vejledning kan du oprette et lysbilledshow ved at følge disse enkle trin:

Skriv nogle markup

     Slideshow 

Skriv typografier for at skjule lysbilleder og kun vise et lysbillede.

For at skjule slides skal du give dem en standardstil. Det dikterer, at du kun viser et dias, hvis det er aktivt, eller hvis du vil vise det.

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

Skift diasene i et tidsinterval.

Det første skridt til at ændre, hvilket dias der vises, er at vælge diasindpakningen (erne) og derefter dens dias.

Når du vælger diasene, skal du gå over hvert dias og tilføje eller fjerne en aktiv klasse afhængigt af det dias, du vil vise. Gentag derefter bare processen i et bestemt tidsinterval.

Husk, at når du fjerner en aktiv klasse fra et dias, skjuler du den på grund af de typografier, der blev defineret i det foregående trin. Men når du føjer en aktiv klasse til diaset, overskriver du stilen display:none to display:block, så diaset vises for brugerne.

 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 eksempel efter denne tutorial