免費(fèi)AI編程助手
W3.JS 幻燈片
2020-11-05 16:54 更新
開啟幻燈片:
w3.slideshow(selector, interval (milliseconds))
實(shí)例
<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 ?
沒有自動(dòng)啟動(dòng)
為防止幻燈片自動(dòng)啟動(dòng)，請(qǐng)將 interval 參數(shù)設(shè)置為 0:
下一張
添加按鈕瀏覽幻燈片:
當(dāng)初始化一個(gè)幻燈片時(shí)，w3.slideshow()函數(shù)將返回一個(gè)表示該幻燈片的對(duì)象。
var myShow = w3.slideshow(".nature", 0);
slideshow對(duì)象包含屬性和方法，比如next()和previous():
實(shí)例
<button onclick="myShow.previous()">Previous</button>
<button onclick="myShow.next()">Next</button>
<button onclick="myShow.next()">Next</button>
嘗試一下 ? 添加上CSS ?
更多的幻燈片
任何 HTML 元素都可以包含在幻燈片中。
通過使用 CSS 選擇器來定義。
實(shí)例
<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 ?
以上內(nèi)容是否對(duì)您有幫助：
← W3.JS 排序
更多建議：