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() 函数减去 1 或加 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); // Change image every 2 seconds
}
亲自试一试 »
HTML 幻灯片
幻灯片不一定是图片。
它们可以是任何 HTML 内容:
Slide 1
Lorem ipsum
Slide 2
Lorem ipsum
Slide 3
Lorem ipsum
实例
<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>
亲自试一试 »
幻灯片标题
Snow, Norway
Northern Lights, Norway
Beautiful Mountains
The Rain Forest
Mountains!
使用 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">
French Alps
</div>
</div>
亲自试一试 »
幻灯片指示器
使用按钮指示幻灯片放映中有多少张幻灯片以及用户当前正在查看的幻灯片的示例。
