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>

執行以上程式碼後，將會生成一個包含按鈕和顯示文字的幻燈片的輸出，顯示在網頁上。

列印頁面