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() 函数会返回一个表示幻灯片的对象。
var myShow = w3.slideshow(".nature", 0);
幻灯片对象包含属性和方法,例如 next() 和 previous()
示例
<button onclick="myShow.previous()">上一张</button>
<button onclick="myShow.next()">下一张</button>
亲自试一试 »
更多幻灯片
任何HTML元素都可以包含在幻灯片中。
使用CSS选择器定义哪些元素。
示例
标题
<h1 class="city">伦敦</h1>
<h1 class="city">巴黎</h1>
<h1 class="city">东京</h1>
<script>
w3.slideshow(".city");
</script>
亲自试一试 » 使用CSS »