Kaip sukurti skaidrių peržiūrą naudojant HTML, CSS ir „JavaScript“

Žiniatinklio skaidrių demonstravimas yra vaizdų ar teksto seka, kurią sudaro vienas sekos elementas tam tikru laiko tarpu.

Šioje pamokoje galite sukurti skaidrių peržiūrą atlikdami šiuos paprastus veiksmus:

Parašykite šiek tiek žymėjimo

     Slideshow 

Rašykite stilius, norėdami paslėpti skaidres ir rodyti tik vieną skaidrę.

Norėdami paslėpti skaidres, turite suteikti joms numatytąjį stilių. Tai nurodys, kad jūs rodysite tik vieną skaidrę, jei ji yra aktyvi arba norite ją rodyti.

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

Pakeiskite skaidres tam tikru laiko tarpu.

Pirmas žingsnis norint pakeisti skaidrių rodymą yra skaidrių apvalkalo (-ų) ir tada jo skaidrių pasirinkimas.

Pasirinkę skaidres, turite pereiti kiekvieną skaidrę ir pridėti arba pašalinti aktyvią klasę, atsižvelgdami į skaidrę, kurią norite rodyti. Tada tiesiog pakartokite procesą tam tikrą laiko tarpą.

Turėkite omenyje, kad pašalindami aktyvią klasę iš skaidrės, ją slepiate dėl ankstesniame žingsnyje apibrėžtų stilių. Bet kai prie skaidrės pridedate aktyvią klasę, jūs perrašote stilių display:none to display:block, todėl skaidrė bus rodoma vartotojams.

 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“ pavyzdys po šios pamokos