幻燈片如何實現 - W3Schools視頻04

幻燈片（Slideshow）是網頁上常見的一項功能，今日我們來看看W3Schools上的幻燈片教學。

• W3Schools 幻燈片教學
• 幻燈片例子
• 簡化版幻燈片例子

視頻連結

• B站
• YouTube

幻燈片（Slideshow）

我將實現幻燈片效果的基本邏輯整理如下：

1. 將所有幻燈片圖片隱藏（display: none）；
2. JavaScript中設定圖片索引爲1，並顯示索引所指的圖片；
3. 每次顯示圖片前，先將所有圖片再次隱藏。
4. 當點擊左右箭頭時，更改索引（左-1，右+1），或索引超過圖片總數，則重置爲1，反之亦然，再執行圖片顯示函數。

爲了突出重點，我將W3Schools上的例子做了一些簡化，移除了漸變特效、圖片文字（Caption）和圓點導航等，只保留最基本的圖片和左右箭頭。

先看HTML，其實就是一個container、三張圖片、加上左右箭頭：

<div class="slideshow-container">

  <div class="mySlides">
    <img src="img_nature_wide.jpg" style="width:100%">
  </div>

  <div class="mySlides">
    <img src="img_snow_wide.jpg" style="width:100%">
  </div>

  <div class="mySlides">
    <img src="img_mountains_wide.jpg" style="width:100%">
  </div>

  <a class="prev" onclick="changeSlides(-1)">&#10094;</a>
  <a class="next" onclick="changeSlides(1)">&#10095;</a>

</div>

兩個箭頭都有onclick事件，對應的都是changeSlides函數，只是更改了圖片索引。

再看CSS的部分：

.mySlides {
  display: none
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
}

/* Position the "next button" to the right */
.next {
  right: 0;
}

爲了把兩個箭頭分別放在圖片左右兩邊的中間位置，要先將container的position設爲relative，作爲箭頭absolute的父級對象（position: absolute 相對於其第一個父級非預設，即static，的元素）。兩個箭頭的top設爲50%，讓其頂部出現在圖片中央高度，再透過負的margin-top將箭頭往上移動一點，以使其中間在圖片高度的中央位置，因此margin-top的負值約爲箭頭所佔高度的一半。接着，將右箭頭移到右邊：right: 0；

最後來看看JavaScript的部分：

var slideIndex = 1;
showSlides(slideIndex);

function changeSlides(n) {
  showSlides(slideIndex += n);
}

function showSlides(n) {
  var slides = document.getElementsByClassName("mySlides");
  
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }

  slides[slideIndex-1].style.display = "block";  
}

一開始就指定了圖片索引爲1，並馬上執行showSlides，顯示第一張圖片。
接着是changeSlides函數，它的功能就是用新的圖片索引來執行showSlides。
重點就在showSlides當中，首先透過document.getElementsByClassName取得所有圖片，再判斷傳入的圖片索引是否超出範圍：少於1或大於圖片總數，若是則重置索引。然後，用for循環將所有圖片都隱藏起來。最後，根據索引顯示圖片。

這就是幻燈片最核心的邏輯。W3Schools的原例中還有更多輔助性的功能，理解了核心邏輯之後，相信也能簡單地看懂這些額外的部分是怎麼實現的。

考慮到W3Schools在大陸似乎無法訪問，我將原例的代碼也放到了GitHub上。

W3Schools系列的代碼都在GitHub上：W3Schools GitHub

W3Schools教學系列

W3Schools是知名的網頁設計／前端開發教學網站，不僅提供HTML、CSS、JavaScript等的詳盡教學，還可以把它當作說明文件（Documents）。有經驗的前端或多或少已經接觸過這個網站，因爲它經常出現在搜索結果的前幾項。其中，它的How To部分更是包含了大量非常實用的例子，例如，如何製作SlideShow（圖片輪播）、Lightbox、Parallax（視差效果）等等。因此我想做一系列的影片專門介紹這些How To。

W3Schools系列全部視頻：

1. Float響應式網頁佈局
2. Flexbox響應式網頁佈局
3. CSS Grid響應式網頁佈局
4. 幻燈片如何實現
5. 響應式導航如何實現