W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

W3.CSS 幻灯片




手动幻灯片

用W3.CSS显示手动幻灯片非常简单。

只需创建一些具有相同类名的元素即可:

Example

<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">

和两个用于滚动图像的按钮:

Example

<a class="w3-btn-floating" onclick="plusDivs(-1)">&#10094;</a>
<a class="w3-btn-floating" onclick="plusDivs(+1)">&#10095;</a>

和添加用于选择图片的脚本(JavaScript):

Example

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 进行 1 或  1。

showDiv() 函数隐藏 (display="none") 所有类名为 "mySlides" 的元素, 并显示 (display="block") slideIndex当前值的元素。

如果 slideIndex 的值 高于 元素的数量 (x.length), 则 slideIndex 被设置为 0。

如果 slideIndex 的值 低于 1 它将被设置成元素的数量 (x.length)。


自动幻灯片

显示自动幻灯片更简单。

你只需要一些不同的JavaScript:

Example

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);
}
尝试一下 »


HTML幻灯片

幻灯片不一定是图像。

它们可以是任何HTML内容:

Example

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

幻灯片标题

Trolltunga, Norway
Northern Lights, Norway
Beautiful Mountains
The Rain Forest
Mountains!

使用 w3-display-* 类(topleft,topright,bottomleft,bottomright 或 middle)可为每个图像幻灯片添加一个标题文本:

Example

<div class="w3-display-container mySlides">
  <img src="http://cdn.w3schools.wang/img_fjords.jpg" style="width:100%">
  <div class="w3-display-bottomleft w3-container w3-padding-16 w3-black">
    Trolltunga, Norway
  </div>
</div>
尝试一下 »

幻灯片指示符

以下是一个关于使用按钮来显示幻灯片中有多少幻灯片,以及显示用户当前正在查看的幻灯片的实例。

Example

<div class="w3-center">
  <button class="w3-btn" onclick="plusDivs(-1)">&#10094; Prev</button>
  <button class="w3-btn" onclick="plusDivs(1)">Next &#10095;</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>
尝试一下 »

另一个实例:

Example

<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)">&#10094;</div>
    <div class="w3-right" onclick="plusDivs(1)">&#10095;</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>
尝试一下 »

动画幻灯片

Example

<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">
尝试一下 »

淡入淡出动画

Example

<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">
尝试一下 »