最新的Web開發教程

W3.CSS幻燈片

❮上一頁下一頁章❯

手動幻燈片

顯示與W3.CSS手動幻燈片是很容易的。

剛剛創建具有相同的類名的許多元素：

例

<img class="mySlides" src="img_fjords.jpg">
<img class="mySlides" src="img_lights.jpg">
<img class="mySlides" src="img_mountains.jpg">
<img class="mySlides" src="img_forest.jpg">

和兩個按鈕滾動圖像：

例

<a class="w3-btn-floating" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating" onclick="plusDivs(+1)">❯</a>

並添加JavaScript選擇圖像：

例

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

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

JavaScript的解釋

首先，設置slideIndex為1（第一張照片）

然後調用showDivs（）來顯示一個圖像。

當用戶點擊按鈕中的一個呼叫plusDivs（）。

該plusDivs（）函數中減去一加一到slideIndex。

該showDiv（）函數隱藏（ 顯示=“無”）與類名“mySlides”的所有元素，並顯示（ 顯示=“塊”）與給定slideIndex的元素。

如果slideIndex 比元件（x.length）的數量越高，slideIndex被設置為零。

如果slideIndex 小於 1它被設置為元件（x.length）的數目。

自動幻燈片

要顯示自動幻燈片就更簡單了。

你只需要一點點不同的JavaScript：

例

var slideIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1}
    x[slideIndex-1].style.display = "block";
    setTimeout(carousel, 2000); // Change image every 2 seconds
}

HTML幻燈片

幻燈片不必是圖像。

它們可以是任何HTML內容：

幻燈片1

Lorem存有

幻燈片2

Lorem存有

幻燈片3

Lorem存有

例

<div class="mySlides">
<div class="w3-container w3-red">
<h1><b>Did You Know?</b></h1>
<h1><i>We plan to sell trips to the moon in the 2020s</i></h1>
</div>

幻燈片標題

Trolltunga，挪威

北極光，挪威

秀美山川

林雨

山！

添加字幕文本與W3-顯示- *類每個圖像幻燈片（左上，topright，BOTTOMLEFT，bottomright或中間）：

例

<div class="w3-display-container mySlides">
<img src="img_fjords.jpg" style="width:100%">
<div class="w3-display-bottomleft w3-container w3-padding-hor-16 w3-black">
Trolltunga, Norway
</div>
</div>

幻燈片指標

使用按鈕來表示有多少張幻燈片中有幻燈片，以及滑動目前用戶正在瀏覽的一個例子。

例

<div class="w3-center">
<button class="w3-btn" onclick="plusDivs(-1)">❮ Prev</button>
<button class="w3-btn" onclick="plusDivs(1)">Next ❯</button>

<button class="w3-btn demo" onclick="currentDiv(1)">1</button>
<button class="w3-btn demo" onclick="currentDiv(2)">2</button>
<button class="w3-btn demo" onclick="currentDiv(3)">3</button>
</div>

另一個例子：

❮

❯

例

<div class="w3-content w3-display-container">
<img class="mySlides" src="img_nature.jpg">
<img class="mySlides" src="img_fjords.jpg">
<img class="mySlides" src="img_mountains.jpg">
<div class="w3-center w3-display-bottomleft" style="width:100%">
    <div class="w3-left" onclick="plusDivs(-1)">❮</div>
    <div class="w3-right" onclick="plusDivs(1)">❯</div>
    <span class="w3-badge demo w3-border" onclick="currentDiv(1)"></span>
    <span class="w3-badge demo w3-border" onclick="currentDiv(2)"></span>
    <span class="w3-badge demo w3-border" onclick="currentDiv(3)"></span>
</div>
</div>

圖像作為指標

使用圖像作為指標的一個例子：

例

<div class="w3-content" style="max-width:1200px">
<img class="mySlides" src="img_nature_wide.jpg" style="width:100%">
<img class="mySlides" src="img_fjords_wide.jpg" style="width:100%">
<img class="mySlides" src="img_mountains_wide.jpg" style="width:100%">

<div class="w3-row-padding w3-section">
    <div class="w3-col s4">
      <img class="demo w3-border w3-hover-shadow"
      src="img_nature_wide.jpg" onclick="currentDiv(1)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-border w3-hover-shadow"
      src="img_fjords_wide.jpg" onclick="currentDiv(2)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-border w3-hover-shadow"
      src="img_mountains_wide.jpg" onclick="currentDiv(3)">
    </div>
</div>
</div>

幻燈片動畫

例

<img class="mySlides w3-animate-top" src="img_01.jpg">
<img class="mySlides w3-animate-bottom" src="img_02.jpg">
<img class="mySlides w3-animate-top" src="img_03.jpg">
<img class="mySlides w3-animate-bottom" src="img_04.jpg">

褪色動畫

例

<img class="mySlides w3-animate-fading" src="img_01.jpg">
<img class="mySlides w3-animate-fading" src="img_02.jpg">
<img class="mySlides w3-animate-fading" src="img_03.jpg">
<img class="mySlides w3-animate-fading" src="img_04.jpg">

❮上一頁下一頁章❯