css 幻灯片_如何使用HTML，CSS和JavaScript创建幻灯片-CSDN博客

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 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);
  }