Un slideshow web este o secvență de imagini sau text care constă în afișarea unui element al secvenței într-un anumit interval de timp.
Pentru acest tutorial puteți crea un slideshow urmând acești pași simpli:
Conţinut
Scrieți ceva marcaj
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slideshow</title>
<link rel="stylesheet" href="https://www.freecodecamp.org/news/how-to-create-a-slideshow/style.css">
</head>
<body>
<div id="slideshow-example" data-component="slideshow">
<div role="list">
<div class="slide">
<img src="" alt="">
</div>
<div class="slide">
<img src="" alt="">
</div>
<div class="slide">
<img src="" alt="">
</div>
</div>
</div>
<script src="slideshow.js"></script>
</body>
</html>
Scrieți stiluri pentru a ascunde diapozitivele și afișați doar un singur diapozitiv.
Pentru a ascunde diapozitivele trebuie să le dați un stil implicit. Va dicta să afișați un singur diapozitiv dacă este activ sau dacă doriți să-l afișați.
[data-component="slideshow"] .slide {
display: none;
}
[data-component="slideshow"] .slide.active {
display: block;
}
Schimbați diapozitivele într-un interval de timp.
Primul pas pentru a schimba ce diapozitive este să selectați învelișul (diapozitivele) și apoi diapozitivele acestuia.
Când selectați diapozitivele, trebuie să treceți peste fiecare diapozitiv și să adăugați sau să eliminați o clasă activă în funcție de diapozitivul pe care doriți să îl afișați. Apoi repetați procesul pentru un anumit interval de timp.
Rețineți că atunci când eliminați o clasă activă dintr-un diapozitiv, o ascundeți din cauza stilurilor definite în pasul anterior. Dar când adăugați o clasă activă la diapozitiv, suprascrieți stilul display:none to display:block
, astfel încât diapozitivul va fi afișat utilizatorilor.
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 exemplu urmând acest tutorial
#Cum #să #creați #slideshow #HTML #CSS #și #JavaScript
Cum să creați un slideshow cu HTML, CSS și JavaScript