W3.CSS Slideshow (幻灯片)
2020-12-01 14:20 更新
手动幻灯片放映
使用 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">
<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>
<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";
}
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
}
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 内容：
实例
<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>
<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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
幻灯片标题
使用 w3-display-* classes (topleft, topmiddle, topright, bottomleft, bottommiddle, bottomright, left, right or 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">
French Alps
</div>
</div>
<img src="img_snowtops.jpg" style="width:100%">
<div class="w3-display-bottomleft w3-container w3-padding-16 w3-black">
French Alps
</div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
幻灯片指示器
使用按钮指示幻灯片中有多少张幻灯片以及用户当前正在查看哪些幻灯片的示例。
实例
<div class="w3-center">
<button class="w3-button" onclick="plusDivs(-1)">❮ Prev</button>
<button class="w3-button" onclick="plusDivs(1)">Next ❯</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>
<button class="w3-button" onclick="plusDivs(-1)">❮ Prev</button>
<button class="w3-button" onclick="plusDivs(1)">Next ❯</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>
<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>
<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>
<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">
<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">
<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">
尝试一下 »
点击“尝试一下”按钮查看在线实例
以上内容是否对您有帮助：
更多建议：