幻燈片如何實現 - W3Schools視訊04
幻燈片(Slideshow)是網頁上常見的一項功能,今日我們來看看W3Schools上的幻燈片教學。
視訊連結
幻燈片(Slideshow)
我將實現幻燈片效果的基本邏輯整理如下:
display: none
為了突出重點,我將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)"> </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 { 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系列全部視訊: