HTML - 网页幻灯片演示

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

示例

让我们来看下面的例子，我们将创建一个HTML网页幻灯片演示。

<!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>

运行以上代码后，将会生成一个包含按钮和显示文本的幻灯片的输出，显示在网页上。

打印页面