jQuery EasyUI使用教程之添加自動播放標籤

<jQuery EasyUI最新版下載>

本教程將爲你展現如何建立一個自動播放標籤。該標籤組件顯示第一個面板，而後顯示第二個、第三個......咱們將編寫一些代碼來自定切換標籤面板並使其循環。

查看演示

Step 1：建立標籤

< div id = "tt" class = "easyui-tabs" style = "width:330px;height:270px;" >

< div title = "Shirt1" style = "padding:20px;" >

< img src = "images/shirt1.gif" data-bd-imgshare-binded = "1" >

</ div >

< div title = "Shirt2" style = "padding:20px;" >

< img src = "images/shirt2.gif" data-bd-imgshare-binded = "1" >

</ div >

< div title = "Shirt3" style = "padding:20px;" >

< img src = "images/shirt3.gif" data-bd-imgshare-binded = "1" >

</ div >

< div title = "Shirt4" style = "padding:20px;" >

< img src = "images/shirt4.gif" data-bd-imgshare-binded = "1" >

</ div >

< div title = "Shirt5" style = "padding:20px;" >

< img src = "images/shirt5.gif" data-bd-imgshare-binded = "1" >

</ 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);

有興趣的朋友能夠點擊查看更多有關jQuery EasyUI的文章！