1. 引入必要的文件： 在 HTML 页面中引入 jQuery、EasyUI 的 CSS 和 JavaScript 文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
<script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
</body>
</html>
2. 创建初始标签页： 使用 tabs 函数创建初始的标签页。
<div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
<div title="Tab 1" style="padding:10px;">
Content of Tab 1
</div>
<div title="Tab 2" style="padding:10px;">
Content of Tab 2
</div>
<div title="Tab 3" style="padding:10px;">
Content of Tab 3
</div>
</div>
3. 自动播放标签页： 使用 setInterval 定时器和 tabs 的 select 方法实现标签页的自动切换。
<script>
$(function(){
// 初始化标签页
$('#tt').tabs();
// 设置自动播放时间间隔（单位：毫秒）
var interval = 2000;
// 定时器，每隔 interval 毫秒切换到下一个标签页
var autoPlay = setInterval(function(){
var currentIndex = $('#tt').tabs('getSelectedIndex');
var totalTabs = $('#tt').tabs('tabs').length;
// 判断是否为最后一个标签页，是则切换到第一个标签页，否则切换到下一个标签页
var nextIndex = currentIndex === totalTabs - 1 ? 0 : currentIndex + 1;
// 使用 select 方法切换到指定索引的标签页
$('#tt').tabs('select', nextIndex);
}, interval);
// 停止自动播放，例如：clearInterval(autoPlay);
});
</script>
在上述代码中，通过 setInterval 定时器每隔一段时间切换到下一个标签页。tabs 的 getSelectedIndex 方法用于获取当前选中的标签页索引，tabs 的 tabs 方法用于获取所有的标签页，tabs 的 select 方法用于切换到指定索引的标签页。你可以根据需要调整自动播放的时间间隔。
请注意，如果用户手动切换到其他标签页，可能需要根据实际需求停止自动播放，你可以使用 clearInterval 方法停止定时器。
转载请注明出处：http://www.zyzy.cn/article/detail/13101/jQuery EasyUI