W3.JS 幻灯片
开启幻灯片:
w3.slideshow(selector, interval (milliseconds))
实例
<img class="nature" src="
https://atts.w3cschool.cn/img_mountains.jpg
">
<img class="nature" src=" https://atts.w3cschool.cn/img_snowtops.jpg ">
<img class="nature" src=" https://atts.w3cschool.cn/img_nature.jpg ">
<script>w3.slideshow(".nature");</script>
<img class="nature" src=" https://atts.w3cschool.cn/img_snowtops.jpg ">
<img class="nature" src=" https://atts.w3cschool.cn/img_nature.jpg ">
<script>w3.slideshow(".nature");</script>
尝试一下 » 添加上CSS »
没有自动启动
为防止幻灯片自动启动，请将 interval 参数设置为 0:
下一张
添加按钮浏览幻灯片:
当初始化一个幻灯片时，w3.slideshow()函数将返回一个表示该幻灯片的对象。
var myShow = w3.slideshow(".nature", 0);
slideshow对象包含属性和方法，比如next()和previous():
实例
<button onclick="myShow.previous()">Previous</button>
<button onclick="myShow.next()">Next</button>
<button onclick="myShow.next()">Next</button>
尝试一下 » 添加上CSS »
更多的幻灯片
任何 HTML 元素都可以包含在幻灯片中。
通过使用 CSS 选择器来定义。
实例
<h1 class="city">London</h1>
<h1 class="city">Paris</h1>
<h1 class="city">Tokyo</h1>
<script>w3.slideshow(".city");</script>
<h1 class="city">Paris</h1>
<h1 class="city">Tokyo</h1>
<script>w3.slideshow(".city");</script>
尝试一下 » 添加上CSS »