Kuidas luua slaidiseanss HTML-i, CSS-i ja JavaScripti abil

Veebislaidiseanss on piltide või teksti jada, mis koosneb järjestuse ühe elemendi kuvamisest teatud ajaintervalliga.

Selle õpetuse jaoks saate slaidiseansi luua järgides neid lihtsaid samme:

Kirjutage mõni märgistus

     Slideshow 

Kirjutage stiilid slaidide peitmiseks ja ainult ühe slaidi kuvamiseks.

Slaidide peitmiseks peate neile andma vaikestiili. See dikteerib, et kuvatakse ainult üks slaid, kui see on aktiivne või kui soovite seda näidata.

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

Slaidide muutmine ajaintervalliga.

Esimene samm slaidiesitluste muutmiseks on valida slaidide ümbris (ed) ja seejärel selle slaidid.

Slaidide valimisel peate iga slaidi üle käima ja aktiivse klassi lisama või eemaldama, sõltuvalt slaidist, mida soovite näidata. Seejärel korrake lihtsalt protsessi teatud ajaperioodi jooksul.

Pidage meeles, et kui eemaldate slaidilt aktiivse klassi, peidate selle eelmises etapis määratletud stiilide tõttu. Kuid kui lisate slaidile aktiivse klassi, kirjutate stiili üle display:none to display:block, nii et slaidi kuvatakse kasutajatele.

 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); }

Selle õpetuse järgne näide Codepenist