W3.JS 幻灯片
开启幻灯片:
w3.slideshow(selector, interval (milliseconds))
实例
<img class="nature" src="img_snowtops.jpg">
<img class="nature" src="img_mountains.jpg">
<img class="nature" src="img_nature.jpg">
<script>
w3.slideshow(".nature");
</script>
亲自试一试 »
禁止自动启动
为防止幻灯片自动启动,请将 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>
亲自试一试 »
更多的幻灯片
任何 HTML 元素都可以包含在幻灯片中。
通过使用 CSS 选择器来定义。
实例
Headers:
<h1 class="city">London</h1>
<h1 class="city">Paris</h1>
<h1
class="city">Tokyo</h1>
<script>
w3.slideshow(".city");
</script>
亲自试一试 »
使用 CSS »