javascript
css 幻灯片_如何使用HTML，CSS和JavaScript创建幻灯片
css 幻燈片
A web slideshow is a sequence of images or text that consists of showing one element of the sequence in a certain time interval.
網(wǎng)絡(luò)幻燈片是一系列圖像或文本，包括在一定時(shí)間間隔內(nèi)顯示序列中的一個(gè)元素。
For this tutorial you can create a slideshow by following these simple steps:
對(duì)于本教程，您可以按照以下簡(jiǎn)單步驟創(chuàng)建幻燈片：
寫(xiě)一些標(biāo)記 (Write some markup)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Slideshow</title><link rel="stylesheet" href="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>編寫(xiě)樣式以隱藏幻燈片并僅顯示一張幻燈片。 (Write styles to hide slides and show only one slide.)
To hide the slides you have to give them a default style. It'll dictate that you only show one slide if it is active or if you want to show it.
要隱藏幻燈片，您必須為其提供默認(rèn)樣式。 它將指示您僅顯示一張?zhí)幱诨顒?dòng)狀態(tài)或想要顯示的幻燈片。
[data-component="slideshow"] .slide {display: none;}[data-component="slideshow"] .slide.active {display: block;}每隔一段時(shí)間更改幻燈片。 (Change the slides in a time interval.)
The first step to changing which slides show is to select the slide wrapper(s) and then its slides.
更改幻燈片顯示的第一步是選擇幻燈片包裝，然后選擇其幻燈片。
When you select the slides you have to go over each slide and add or remove an active class depending on the slide that you want to show. Then just repeat the process for a certain time interval.
選擇幻燈片時(shí)，您必須經(jīng)過(guò)每張幻燈片，然后根據(jù)要顯示的幻燈片添加或刪除活動(dòng)的班級(jí)。 然后，只需在一定時(shí)間間隔內(nèi)重復(fù)該過(guò)程即可。
Keep it in mind that when you remove an active class from a slide, you are hiding it because of the styles defined in the previous step. But when you add an active class to the slide, you are overwritring the style display:none to display:block , so the slide will show to the users.
請(qǐng)記住，從幻燈片中刪除活動(dòng)類時(shí)，由于上一步中定義的樣式，您將其隱藏。 但是，當(dāng)您向幻燈片中添加活動(dòng)類時(shí)，您將覆蓋樣式display:none to display:block ，因此幻燈片將向用戶顯示。
var slideshows = document.querySelectorAll('[data-component="slideshow"]');// Apply to all slideshows that you define with the markup wroteslideshows.forEach(initSlideShow);function initSlideShow(slideshow) {var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`); // Get an array of slidesvar index = 0, time = 5000;slides[index].classList.add('active'); setInterval( () => {slides[index].classList.remove('active');//Go over each slide incrementing the indexindex++;// If you go over all slides, restart the index to show the first slide and start againif (index === slides.length) index = 0; slides[index].classList.add('active');}, time);}本教程后面的Codepen示例 (Codepen example following this tutorial)
翻譯自: https://www.freecodecamp.org/news/how-to-create-a-slideshow/
css 幻燈片
總結(jié)
以上是生活随笔為你收集整理的css 幻灯片_如何使用HTML，CSS和JavaScript创建幻灯片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 梦到不好的事情是什么意思
- 下一篇： assign复制对象_JavaScrip