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.
網絡幻燈片是一系列圖像或文本，包括在一定時間間隔內顯示序列中的一個元素。
For this tutorial you can create a slideshow by following these simple steps:
對于本教程，您可以按照以下簡單步驟創建幻燈片：
寫一些標記 (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>編寫樣式以隱藏幻燈片并僅顯示一張幻燈片。 (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.
要隱藏幻燈片，您必須為其提供默認樣式。 它將指示您僅顯示一張處于活動狀態或想要顯示的幻燈片。
[data-component="slideshow"] .slide {display: none;}[data-component="slideshow"] .slide.active {display: block;}每隔一段時間更改幻燈片。 (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.
選擇幻燈片時，您必須經過每張幻燈片，然后根據要顯示的幻燈片添加或刪除活動的班級。 然后，只需在一定時間間隔內重復該過程即可。
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.
請記住，從幻燈片中刪除活動類時，由于上一步中定義的樣式，您將其隱藏。 但是，當您向幻燈片中添加活動類時，您將覆蓋樣式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 幻燈片
![POJ 3660 Cow Contest [Floyd]](http://pic.xiahunao.cn/POJ 3660 Cow Contest [Floyd])