jQuery EasyUI使用教程：添加自動播放標簽

---

Kendo UI for jQuery——創(chuàng)建現(xiàn)代Web應用程序的最完整UI庫！查看詳情>>>

<jQuery EasyUI最新版下載>

本教程將為你展示如何創(chuàng)建一個自動播放標簽。該標簽組件顯示第一個面板，然后顯示第二個、第三個......我們將編寫一些代碼來自定切換標簽面板并使其循環(huán)。

查看演示

Step 1：創(chuàng)建標簽

<div id="tt" class="easyui-tabs" style="width:330px;height:270px;">
<div title="Shirt1" style="padding:20px;">
<img src="images/shirt1.gif">
</div>
<div title="Shirt2" style="padding:20px;">
<img src="images/shirt2.gif">
</div>
<div title="Shirt3" style="padding:20px;">
<img src="images/shirt3.gif">
</div>
<div title="Shirt4" style="padding:20px;">
<img src="images/shirt4.gif">
</div>
<div title="Shirt5" style="padding:20px;">
<img src="images/shirt5.gif">
</div>
</div>

Step 2：編寫自動播放代碼

var index = 0;
var t = $('#tt');
var tabs = t.tabs('tabs');
setInterval(function(){
t.tabs('select', tabs[index].panel('options').title);
index++;
if (index >= tabs.length){
index = 0;
}
}, 3000);

正如你看到的那樣，我們調用'tabs' 方法還獲得所有的標簽面板，并使用'setInterval' 函數(shù)來切換它們。

下載該EasyUI示例：easyui-tabs-demo.zip

購買最新正版授權！"咨詢在線客服"