W3.CSS 幻燈片
手動幻燈片
使用 W3.CSS 顯示手動幻燈片非常容易。
只需建立多個具有相同類名的元素
示例
<img class="mySlides" src="img_snowtops.jpg">
<img class="mySlides" src="img_lights.jpg">
<img class="mySlides" src="img_mountains.jpg">
<img class="mySlides" src="img_forest.jpg">
並提供兩個按鈕來滾動圖片
示例
<button class="w3-button w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-display-right" onclick="plusDivs(+1)">❯</button>
並新增 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() 函式會隱藏（display="none"）所有類名為 "mySlides" 的元素，並顯示（display="block"）具有給定 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); // 每 2 秒更換圖片
}
自己試試 »
HTML 幻燈片
幻燈片不必是圖片。
它們可以是任何 HTML 內容
幻燈片 1
Lorem ipsum
幻燈片 2
Lorem ipsum
幻燈片 3
Lorem ipsum
示例
<div class="mySlides">
<div class="w3-container w3-red">
<h1><b>你是否知道？</b></h1>
<h1><i>我們計劃在 2020 年代出售月球旅行</i></h1>
</div>
</div>
自己試試 »
幻燈片標題
雪，挪威
北極光，挪威
美麗的群山
雨林
山！
使用 w3-display-* 類（topleft, topmiddle, topright, bottomleft, bottommiddle, bottomright, left, right 或 middle）為每個圖片幻燈片新增標題文字
示例
<div class="w3-display-container mySlides">
<img src="img_snowtops.jpg" style="width:100%">
<div class="w3-display-bottomleft w3-container w3-padding-16 w3-black">
法國阿爾卑斯山
</div>
</div>
自己試試 »
幻燈片指示器
一個使用按鈕指示幻燈片數量以及使用者當前正在檢視哪個幻燈片的示例。
示例
<div class="w3-center">
<button class="w3-button" onclick="plusDivs(-1)">❮ 上一個</button>
<button class="w3-button" onclick="plusDivs(1)">下一個 ❯</button>
<button class="w3-button demo" onclick="currentDiv(1)">1</button>
<button class="w3-button demo" onclick="currentDiv(2)">2</button>
<button class="w3-button 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_snowtops.jpg">
<img class="mySlides" src="img_mountains.jpg">
<div class="w3-center w3-display-bottommiddle" 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_snow_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-opacity" src="img_nature_wide.jpg"
style="width:100%" onclick="currentDiv(1)">
</div>
<div class="w3-col s4">
<img class="demo w3-opacity" src="img_snow_wide.jpg"
style="width:100%;display:none" onclick="currentDiv(2)">
</div>
<div class="w3-col s4">
<img class="demo w3-opacity" src="img_mountains_wide.jpg"
style="width:100%;display:none" onclick="currentDiv(3)">
</div>
</div>
</div>
自己試試 »
同一頁面上的多個幻燈片
要在同一頁面上操作多個幻燈片，您必須為每個幻燈片組的成員使用不同的類名
示例
<div class="w3-content">
<img class="mySlides1" src="img_snowtops.jpg" style="width:100%">
<img class="mySlides1" src="img_lights.jpg" style="width:100%">
<img class="mySlides1" src="img_mountains.jpg" style="width:100%">
<img class="mySlides1" src="img_forest.jpg" style="width:100%">
</div>
<div class="w3-content">
<img class="mySlides2" src="img_la.jpg" style="width:100%">
<img class="mySlides2" src="img_ny.jpg" style="width:100%">
<img class="mySlides2" src="img_chicago.jpg" style="width:100%">
</div>
自己試試 »
動畫幻燈片
使用 w3-animate-* 類，可以從螢幕頂部、底部、左側或右側滑動或淡入淡出一個元素。
示例
<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">
自己試試 »
淡入淡出動畫
w3-animate-fading 類可以使元素淡入淡出（大約需要 10 秒）。
示例
<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">
自己試試 »
