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 资源

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

步骤 2: 创建 Tabs 组件

<divid="tt"class="easyui-tabs"style="width:700px;height:300px;"><divtitle="Tab1"style="padding:20px;display:block;"><h2>标签页 1</h2><p>这是第一个标签页的内容。</p><imgsrc="https://www.jeasyui.com/images/easyui_small.jpg"style="width:100%;"></div><divtitle="Tab2"style="padding:20px;"><h2>标签页 2</h2><p>这是第二个标签页的内容。</p></div><divtitle="Tab3"style="padding:20px;"><h2>标签页 3</h2><p>这是第三个标签页的内容。</p></div><divtitle="Tab4"style="padding:20px;"><h2>标签页 4</h2><p>这是第四个标签页的内容。</p></div></div><!-- 可选：播放控制按钮 --><divstyle="margin-top:10px;text-align:center;"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-play"onclick="startAutoPlay()">开始播放</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-pause"onclick="stopAutoPlay()">暂停播放</a></div>

步骤 3: JavaScript 实现自动播放

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

<scripttype="text/javascript">vartimer;// 定时器varinterval=3000;// 切换间隔（毫秒），3秒切换一次varindex=0;// 当前标签索引functionautoPlay(){varcount=$('#tt').tabs('tabs').length;// 获取标签页总数index++;if(index>=count){index=0;// 循环到第一个}$('#tt').tabs('select',index);}functionstartAutoPlay(){if(timer)clearInterval(timer);// 防止重复启动timer=setInterval(autoPlay,interval);}functionstopAutoPlay(){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>，高度固定。
- 指示器：添加小圆点指示当前页（需额外代码）。