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

cloud 發布于2019-08-02 14:30 / 1814人閱讀

摘要：幻燈片是網頁上常見的一項功能，今日我們來看看上的幻燈片教學。這就是幻燈片最核心的邏輯。系列全部視頻響應式網頁布局響應式網頁布局響應式網頁布局幻燈片如何實現響應式導航如何實現

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

W3Schools 幻燈片教學

幻燈片例子

簡化版幻燈片例子

視頻連結

B站

YouTube

幻燈片（Slideshow）

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

將所有幻燈片圖片隱藏（display: none）；

JavaScript中設定圖片索引為1，并顯示索引所指的圖片；

每次顯示圖片前，先將所有圖片再次隱藏。

當點擊左右箭頭時，更改索引（左-1，右+1），或索引超過圖片總數，則重置為1，反之亦然，再執行圖片顯示函數。

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

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

兩個箭頭都有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系列全部視頻：

Float響應式網頁布局

Flexbox響應式網頁布局

CSS Grid響應式網頁布局

幻燈片如何實現

響應式導航如何實現

云服務器 GPU云服務器實現幻燈片 webrtc如何實現音視頻同步 webrtc如何實現音視頻切換音視頻如何實現音畫同步

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53846.html

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

摘要：幻燈片是網頁上常見的一項功能，今日我們來看看上的幻燈片教學。這就是幻燈片最核心的邏輯。系列全部視頻響應式網頁布局響應式網頁布局響應式網頁布局幻燈片如何實現響應式導航如何實現幻燈片（Slideshow）是網頁上常見的一項功能，今日我們來看看W3Schools上的幻燈片教學。 W3Schools 幻燈片教學幻燈片例子簡化版幻燈片例子視頻連結 B站 YouTube 幻燈片（S...

HackerShell 2019-08-23 15:57 評論0 收藏0
幻燈片如何實現 - W3Schools視頻04

摘要：幻燈片是網頁上常見的一項功能，今日我們來看看上的幻燈片教學。這就是幻燈片最核心的邏輯。系列全部視頻響應式網頁布局響應式網頁布局響應式網頁布局幻燈片如何實現響應式導航如何實現幻燈片（Slideshow）是網頁上常見的一項功能，今日我們來看看W3Schools上的幻燈片教學。 W3Schools 幻燈片教學幻燈片例子簡化版幻燈片例子視頻連結 B站 YouTube 幻燈片（S...

gyl_coder 2019-08-30 15:56 評論0 收藏0
燈箱效果如何實現 - W3Schools視頻06

摘要：燈箱效果是將圖片放大彈出顯示，并將背景變暗，以突出圖片。燈箱效果教學燈箱效果例子視頻連結站燈箱效果實現燈箱效果的重點在于預設隱藏燈箱。圖片放大的效果可透過動畫實現。燈箱（Lightbox）效果是將圖片放大彈出顯示，并將背景變暗，以突出圖片。這種效果可用于單張圖片，也可用于圖片庫。其原理跟模態框（Modal）基本一樣。W3Schools有分Modal Images和Lightbox兩個...

galaxy_robot 2019-08-23 16:15 評論0 收藏0
燈箱效果如何實現 - W3Schools視頻06

摘要：燈箱效果是將圖片放大彈出顯示，并將背景變暗，以突出圖片。燈箱效果教學燈箱效果例子視頻連結站燈箱效果實現燈箱效果的重點在于預設隱藏燈箱。圖片放大的效果可透過動畫實現。燈箱（Lightbox）效果是將圖片放大彈出顯示，并將背景變暗，以突出圖片。這種效果可用于單張圖片，也可用于圖片庫。其原理跟模態框（Modal）基本一樣。W3Schools有分Modal Images和Lightbox兩個...

fasss 2019-08-02 16:08 評論0 收藏0