html幻灯片图片轮播w3,W3.CSS Slideshow (幻灯片)

手动幻灯片放映

使用 W3.CSS 显示手动幻灯片非常容易。

只需创建多个具有相同类名的元素即可：

实例

和两个按钮来滚动图像：

实例

❮

❯

并添加 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

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 内容：

实例

Did You Know?

We plan to sell trips to the moon in the 2020s

尝试一下 »

点击“尝试一下”按钮查看在线实例

幻灯片标题

使用 w3-display-* classes (topleft, topmiddle, topright, bottomleft, bottommiddle, bottomright, left, right or middle) 为每个图像幻灯片添加标题文本：

实例

  

French Alps

尝试一下 »

点击“尝试一下”按钮查看在线实例

幻灯片指示器

使用按钮指示幻灯片中有多少张幻灯片以及用户当前正在查看哪些幻灯片的示例。

实例

❮ Prev

Next ❯

1

2

3

尝试一下 »

点击“尝试一下”按钮查看在线实例

另一个例子：

实例

  

  

  

❮

❯

尝试一下 »

点击“尝试一下”按钮查看在线实例

图片作为指示

使用图像作为指示的示例：

实例

  

  

  

      

style="width:100%" οnclick="currentDiv(1)">

      

style="width:100%;display:none" οnclick="currentDiv(2)">

      

style="width:100%;display:none" οnclick="currentDiv(3)">

尝试一下 »

点击“尝试一下”按钮查看在线实例

同一页面上的多个幻灯片

要在一个页面上操作多个幻灯片，必须对每个幻灯片组的成员进行不同的分类：

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例

动画幻灯片

使用 w3-animate- * 类从屏幕的顶部，底部，左侧或右侧滑动或淡入一个元素。

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例

淡入淡出的动画

w3-animate-fading类淡入和淡出的元件(需要大约 10 秒)。

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例