幻燈片如何實現 - W3Schools視訊03
幻燈片（Slideshow）是網頁上常見的一項功能，今日我們來看看W3Schools上的幻燈片教學。
視訊連結
幻燈片（Slideshow）
我將實現幻燈片效果的基本邏輯整理如下：
- 將所有幻燈片圖片隱藏（display: none）；
- JavaScript中設定圖片索引為1，並顯示索引所指的圖片；
- 每次顯示圖片前，先將所有圖片再次隱藏。
- 當點選左右箭頭時，更改索引（左-1，右+1），或索引超過圖片總數，則重置為1，反之亦然，再執行圖片顯示函式。
為了突出重點，我將W3Schools上的例子做了一些簡化，移除了漸變特效、圖片文字（Caption）和圓點導航，只保留最基本的圖片和左右箭頭。
先看HTML，其實就是一個container、三張圖片、加上左右箭頭：
<div class="slideshow-container"> <div class="mySlides fade"> <img src="img_nature_wide.jpg" style="width:100%"> </div> <div class="mySlides fade"> <img src="img_snow_wide.jpg" style="width:100%"> </div> <div class="mySlides fade"> <img src="img_mountains_wide.jpg" style="width:100%"> </div> <a class="prev" onclick="changeSlides(-1)"> </a> <a class="next" onclick="changeSlides(1)"> </a> </div>
兩個箭頭都有onclick事件，對應的都是changeSlides函式，只是更改了圖片索引。
再看CSS的部分：
.mySlides {
display: none
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
為了把兩個箭頭分別放在圖片左右兩邊的中間位置，要先將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。