jQuery EasyUI 布局 – 添加自动播放标签页（Tabs）

jQuery EasyUI 布局 – 添加自动播放标签页（Tabs）

jQuery EasyUI 的 tabs 组件本身不内置自动播放（autoplay）功能，但可以通过简单的 JavaScript 代码实现自动切换标签页（autoplay tabs），并支持循环播放、鼠标悬停暂停、播放/暂停控制等。常用于首页轮播展示、广告位、新闻头条等场景。

官方教程参考：https://www.jeasyui.com/tutorial/layout/tabs3.php
在线 Demo：https://www.jeasyui.com/tutorial/layout/tabs3_demo.html

步骤 1: 引入 EasyUI 资源

<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

步骤 2: 创建 Tabs 组件

<div id="tt" class="easyui-tabs" style="width:700px;height:300px;">
    <div title="Tab1" style="padding:20px;display:block;">
        <h2>标签页 1</h2>
        <p>这是第一个标签页的内容。</p>
        <img src="https://www.jeasyui.com/images/easyui_small.jpg" style="width:100%;">
    </div>
    <div title="Tab2" style="padding:20px;">
        <h2>标签页 2</h2>
        <p>这是第二个标签页的内容。</p>
    </div>
    <div title="Tab3" style="padding:20px;">
        <h2>标签页 3</h2>
        <p>这是第三个标签页的内容。</p>
    </div>
    <div title="Tab4" style="padding:20px;">
        <h2>标签页 4</h2>
        <p>这是第四个标签页的内容。</p>
    </div>
</div>

<!-- 可选：播放控制按钮 -->
<div style="margin-top:10px;text-align:center;">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-play" onclick="startAutoPlay()">开始播放</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-pause" onclick="stopAutoPlay()">暂停播放</a>
</div>

步骤 3: JavaScript 实现自动播放

使用 setInterval 定时切换标签页，支持循环、鼠标悬停暂停。

<script type="text/javascript">
    var timer;          // 定时器
    var interval = 3000; // 切换间隔（毫秒），3秒切换一次
    var index = 0;      // 当前标签索引

    function autoPlay(){
        var count = $('#tt').tabs('tabs').length;  // 获取标签页总数
        index++;
        if (index >= count) {
            index = 0;  // 循环到第一个
        }
        $('#tt').tabs('select', index);
    }

    function startAutoPlay(){
        if (timer) clearInterval(timer);  // 防止重复启动
        timer = setInterval(autoPlay, interval);
    }

    function stopAutoPlay(){
        if (timer) {
            clearInterval(timer);
            timer = null;
        }
    }

    $(function(){
        // 页面加载后自动开始播放
        startAutoPlay();

        // 鼠标悬停 tabs 时暂停，离开时恢复
        $('#tt').hover(
            function(){ stopAutoPlay(); },
            function(){ startAutoPlay(); }
        );

        // 可选：鼠标悬停单个标签时暂停
        $('#tt .tabs li').hover(function(){
            stopAutoPlay();
        });
    });
</script>

关键说明

• 自动切换：通过 setInterval 每隔 interval 毫秒调用 autoPlay()，使用 tabs('select', index) 切换。
• 循环播放：当 index 达到标签总数时，重置为 0。
• 暂停/恢复：
• 鼠标悬停整个 tabs 区域时自动暂停（常见轮播需求）。
• 点击“暂停”按钮手动停止。
• 初始播放：页面加载后自动开始。
• 扩展：
• 添加淡入淡出效果：可在切换时使用自定义动画（EasyUI tabs 支持基本动画，但需扩展）。
• 支持图片轮播：标签内容放 <img>，高度固定。
• 指示器：添加小圆点指示当前页（需额外代码）。

完整示例效果

• 标签页每 3 秒自动切换一次。
• 鼠标移入 tabs 区域暂停，移出恢复。
• 支持手动开始/暂停按钮。
• 无限循环。

更多示例：

• 官方自动播放 Tabs：https://www.jeasyui.com/tutorial/layout/tabs3.php
• Demo：https://www.jeasyui.com/tutorial/layout/tabs3_demo.html

如果需要添加指示器（dots）、左右箭头导航、淡入淡出动画，或结合 carousel 插件的更高级轮播，请提供更多细节！