Html 简明教程

HTML - Web Slide Desk

幻灯片是演示文稿的单页。一般来说，一组幻灯片可称为幻灯片组。

Example

我们来看看下面的示例，在该示例中，我们将创建一个 HTML Web 幻灯片组

<!DOCTYPE html>
<html>
   <style>
      body {
         font-family: verdana;
         background-color: #F4ECF7;
         color: #DE3163;
      }

      .x {
         display: none;
         text-align: center;
         padding: 123px;
      }

      .x.active {
         display: block;
      }

      .prev,
      .next {
         position: absolute;
         top: 40%;
         background-color: #EAFAF1;
         color: #DE3163;
         padding: 10px 20px;
         cursor: pointer;
         border: none;
         transition: background-color 0.2s;
      }

      .prev:hover,
      .next:hover {
         background-color: #DFFF00;
      }

      .prev {
         left: 10px;
      }

      .next {
         right: 10px;
      }
   </style>
<body>
   <div class="x active">
      <h1>SLIDE 1</h1>
      <p>HELLO</p>
   </div>
   <div class="x">
      <h1>SLIDE 2</h1>
      <p>WELCOME</p>
   </div>
   <div class="x">
      <h1>SLIDE 3</h1>
      <p>THANK YOU.!</p>
   </div>
   <button class="prev" onclick="prevSlide()">Previous</button>
   <button class="next" onclick="nextSlide()">Next</button>
   <script>
      let a = 0;
      const slides = document.querySelectorAll('.x');

      function showSlide(n) {
         slides[a].classList.remove('active');
         a = (n + slides.length) % slides.length;
         slides[a].classList.add('active');
      }

      function prevSlide() {
         showSlide(a - 1);
      }

      function nextSlide() {
         showSlide(a + 1);
      }
      showSlide(a);
   </script>
</body>
</html>

当我们运行以上代码时，它将生成一个输出，其中包含一个按钮以及一个幻灯片，其中包含显示在网页上的文本