A webes diavetítés kép- vagy szövegsorozat, amely abból áll, hogy a szekvencia egyik elemét egy bizonyos időintervallumban mutatja.
Ehhez az oktatóanyaghoz az alábbi egyszerű lépéseket követve hozhat létre diavetítést:
Írjon néhány jelölést
Slideshow ![]()
![]()
![]()
Stílusok írása a diák elrejtéséhez és csak egy diának megjelenítéséhez.
A diák elrejtéséhez alapértelmezett stílust kell megadni nekik. Diktálja, hogy csak egy diát jelenítsen meg, ha az aktív, vagy ha meg akarja jeleníteni.
[data-component="slideshow"] .slide { display: none; } [data-component="slideshow"] .slide.active { display: block; }Változtassa meg a diákat egy időintervallumban.
Az első lépés a diák megjelenítésének megváltoztatására a diák burkolóinak kiválasztása, majd a diák kiválasztása.
Amikor kiválasztja a diákat, minden egyes dián át kell mennie, és hozzá kell adnia vagy el kell távolítania egy aktív osztályt a megjeleníteni kívánt dia függvényében. Ezután csak ismételje meg a folyamatot egy bizonyos időközönként.
Ne feledje, hogy amikor eltávolít egy aktív osztályt a diáról, az előző lépésben meghatározott stílusok miatt elrejti. De amikor hozzáad egy aktív osztályt a diához, felülírja a stílust display:none to display:block, így a diát a felhasználók láthatják.
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); }