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 »