成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

幻燈片如何實(shí)現(xiàn) - W3Schools視頻04

gyl_coder / 929人閱讀

摘要：幻燈片是網(wǎng)頁上常見的一項(xiàng)功能，今日我們來看看上的幻燈片教學(xué)。這就是幻燈片最核心的邏輯。系列全部視頻響應(yīng)式網(wǎng)頁布局響應(yīng)式網(wǎng)頁布局響應(yīng)式網(wǎng)頁布局幻燈片如何實(shí)現(xiàn)響應(yīng)式導(dǎo)航如何實(shí)現(xiàn)

幻燈片（Slideshow）是網(wǎng)頁上常見的一項(xiàng)功能，今日我們來看看W3Schools上的幻燈片教學(xué)。

W3Schools 幻燈片教學(xué)

幻燈片例子

簡化版幻燈片例子

視頻連結(jié)

B站

YouTube

幻燈片（Slideshow）

我將實(shí)現(xiàn)幻燈片效果的基本邏輯整理如下：

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

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

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

當(dāng)點(diǎn)擊左右箭頭時(shí)，更改索引（左-1，右+1），或索引超過圖片總數(shù)，則重置為1，反之亦然，再執(zhí)行圖片顯示函數(shù)。

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

先看HTML，其實(shí)就是一個(gè)container、三張圖片、加上左右箭頭：

兩個(gè)箭頭都有onclick事件，對(duì)應(yīng)的都是changeSlides函數(shù)，只是更改了圖片索引。

再看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;
}

為了把兩個(gè)箭頭分別放在圖片左右兩邊的中間位置，要先將container的position設(shè)為relative，作為箭頭absolute的父級(jí)對(duì)象（position: absolute 相對(duì)于其第一個(gè)父級(jí)非預(yù)設(shè)，即static，的元素）。兩個(gè)箭頭的top設(shè)為50%，讓其頂部出現(xiàn)在圖片中央高度，再透過負(fù)的margin-top將箭頭往上移動(dòng)一點(diǎn)，以使其中間在圖片高度的中央位置，因此margin-top的負(fù)值約為箭頭所占高度的一半。接著，將右箭頭移到右邊：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，并馬上執(zhí)行showSlides，顯示第一張圖片。
接著是changeSlides函數(shù)，它的功能就是用新的圖片索引來執(zhí)行showSlides。
重點(diǎn)就在showSlides當(dāng)中，首先透過document.getElementsByClassName取得所有圖片，再判斷傳入的圖片索引是否超出范圍：少于1或大于圖片總數(shù)，若是則重置索引。然后，用for循環(huán)將所有圖片都隱藏起來。最后，根據(jù)索引顯示圖片。

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

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

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

W3Schools教學(xué)系列

W3Schools是知名的網(wǎng)頁設(shè)計(jì)／前端開發(fā)教學(xué)網(wǎng)站，不僅提供HTML、CSS、JavaScript等的詳盡教學(xué)，還可以把它當(dāng)作說明文件（Documents）。有經(jīng)驗(yàn)的前端或多或少已經(jīng)接觸過這個(gè)網(wǎng)站，因?yàn)樗?jīng)常出現(xiàn)在搜索結(jié)果的前幾項(xiàng)。其中，它的How To部分更是包含了大量非常實(shí)用的例子，例如，如何制作SlideShow（圖片輪播）、Lightbox、Parallax（視差效果）等等。因此我想做一系列的影片專門介紹這些How To。

W3Schools系列全部視頻：

Float響應(yīng)式網(wǎng)頁布局

Flexbox響應(yīng)式網(wǎng)頁布局

CSS Grid響應(yīng)式網(wǎng)頁布局

幻燈片如何實(shí)現(xiàn)

響應(yīng)式導(dǎo)航如何實(shí)現(xiàn)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117529.html

相關(guān)文章

  • 幻燈片如何實(shí)現(xiàn) - W3Schools視頻04

    摘要：幻燈片是網(wǎng)頁上常見的一項(xiàng)功能，今日我們來看看上的幻燈片教學(xué)。這就是幻燈片最核心的邏輯。系列全部視頻響應(yīng)式網(wǎng)頁布局響應(yīng)式網(wǎng)頁布局響應(yīng)式網(wǎng)頁布局幻燈片如何實(shí)現(xiàn)響應(yīng)式導(dǎo)航如何實(shí)現(xiàn) 幻燈片（Slideshow）是網(wǎng)頁上常見的一項(xiàng)功能，今日我們來看看W3Schools上的幻燈片教學(xué)。 W3Schools 幻燈片教學(xué) 幻燈片例子 簡化版幻燈片例子 視頻連結(jié) B站 YouTube 幻燈片（S...

    HackerShell 評(píng)論0 收藏0

  • 幻燈片如何實(shí)現(xiàn) - W3Schools視頻04

    摘要：幻燈片是網(wǎng)頁上常見的一項(xiàng)功能，今日我們來看看上的幻燈片教學(xué)。這就是幻燈片最核心的邏輯。系列全部視頻響應(yīng)式網(wǎng)頁布局響應(yīng)式網(wǎng)頁布局響應(yīng)式網(wǎng)頁布局幻燈片如何實(shí)現(xiàn)響應(yīng)式導(dǎo)航如何實(shí)現(xiàn) 幻燈片（Slideshow）是網(wǎng)頁上常見的一項(xiàng)功能，今日我們來看看W3Schools上的幻燈片教學(xué)。 W3Schools 幻燈片教學(xué) 幻燈片例子 簡化版幻燈片例子 視頻連結(jié) B站 YouTube 幻燈片（S...

    cloud 評(píng)論0 收藏0

  • 燈箱效果如何實(shí)現(xiàn) - W3Schools視頻06

    摘要：燈箱效果是將圖片放大彈出顯示，并將背景變暗，以突出圖片。燈箱效果教學(xué)燈箱效果例子視頻連結(jié)站燈箱效果實(shí)現(xiàn)燈箱效果的重點(diǎn)在于預(yù)設(shè)隱藏?zé)粝?。圖片放大的效果可透過動(dòng)畫實(shí)現(xiàn)。 燈箱（Lightbox）效果是將圖片放大彈出顯示，并將背景變暗，以突出圖片。這種效果可用于單張圖片，也可用于圖片庫。其原理跟模態(tài)框（Modal）基本一樣。W3Schools有分Modal Images和Lightbox兩個(gè)...

    galaxy_robot 評(píng)論0 收藏0

  • 燈箱效果如何實(shí)現(xiàn) - W3Schools視頻06

    摘要：燈箱效果是將圖片放大彈出顯示，并將背景變暗，以突出圖片。燈箱效果教學(xué)燈箱效果例子視頻連結(jié)站燈箱效果實(shí)現(xiàn)燈箱效果的重點(diǎn)在于預(yù)設(shè)隱藏?zé)粝?。圖片放大的效果可透過動(dòng)畫實(shí)現(xiàn)。 燈箱（Lightbox）效果是將圖片放大彈出顯示，并將背景變暗，以突出圖片。這種效果可用于單張圖片，也可用于圖片庫。其原理跟模態(tài)框（Modal）基本一樣。W3Schools有分Modal Images和Lightbox兩個(gè)...

    fasss 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<