Diaesityksen luominen HTML: n, CSS: n ja JavaScriptin avulla

Verkko-diaesitys on kuvasarja tai teksti, joka koostuu sekvenssin yhden osan näyttämisestä tietyllä aikavälillä.

Tätä opetusohjelmaa varten voit luoda diaesityksen seuraamalla näitä yksinkertaisia ​​vaiheita:

Kirjoita merkintä

     Slideshow 

Kirjoita tyylejä piilottaaksesi diat ja näyttää vain yhden dian.

Dioiden piilottamiseksi sinun on annettava heille oletustyyli. Se määrää, että näytät vain yhden dian, jos se on aktiivinen tai haluat näyttää sen.

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

Vaihda diat aikavälillä.

Ensimmäinen vaihe diaesityksen vaihtamiseksi on valita diakääre (t) ja sitten sen diat.

Kun valitset diat, sinun on käytävä läpi kaikki diat ja lisättävä tai poistettava aktiivinen luokka sen mukaan, minkä dian haluat näyttää. Toista sitten prosessi tietyn ajanjakson ajan.

Muista, että kun poistat aktiivisen luokan dialta, piilotat sen edellisessä vaiheessa määriteltyjen tyylien vuoksi. Mutta kun lisäät aktiivisen luokan diaan, korvataan tyyli display:none to display:block, joten dia näkyy käyttäjille.

 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-esimerkki tämän opetusohjelman jälkeen