W3.JS HTML 幻灯片
开始幻灯片
w3.slideshow(选择器, 间隔(毫秒))
示例
<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>
自己试试 »
不自动开始
要阻止幻灯片自动开始,请将间隔参数设置为 0
下一张幻灯片
添加按钮浏览幻灯片
当您初始化一个幻灯片时,w3.slideshow() 函数将返回一个代表该幻灯片的.*object*。
var myShow = w3.slideshow(".nature", 0);
幻灯片.*object* 包含属性和.*method*,例如 next() 和 previous()
示例
<button onclick="myShow.previous()">上一个</button>
<button onclick="myShow.next()">下一个</button>
自己试试 »
更多幻灯片
任何 HTML 元素都可以包含在幻灯片中。
使用 CSS 选择器定义包含哪些元素。
示例
标题
<h1 class="city">London</h1>
<h1 class="city">Paris</h1>
<h1 class="city">Tokyo</h1>
<script>
w3.slideshow(".city");
</script>
自己动手试试 » 带 CSS »