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的文章！