jQuery实现自动切换播放的经典滑动门效果_jquery_脚本之家

来自 : 脚本之家 发布时间：2021-03-25

这篇文章主要介绍了jQuery实现自动切换播放的经典滑动门效果,可实现tab自动定时切换的功能,涉及jQuery基于定时函数动态操作页面元素的相关技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现自动切换播放的经典滑动门效果。分享给大家供大家参考。具体如下：

这是一个滑动门代码，从外观上看，简洁经典，似乎与平时见到的滑动门没什么区别，不过它有一个重要的功能与众不同，那就是会自动切换【播放】滑动门的内容，像腾讯QQ登录后弹出的每日要闻一样，如果你再加以美化，那么就更完美无暇了。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-auto-cha-tab-style-codes/

具体代码如下：

 !DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"  html xmlns=\"http://www.w3.org/1999/xhtml\"  head  meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /  script type=\"text/javascript\" src=\"jquery1.3.2.js\" /script  title autoTab,自动切换播放的滑动门 /title  /head  style *{ margin:0; padding:0;}ul{ list-style:none}body{ font-size:12px}#tabMenus{ width:400px; margin:100px auto 0 auto;overflow:hidden; border:#ccc solid 1px; border-bottom:none;}#tabMenus li{ float:left; width:100px; height:25px; line-height:25px; background:#ccc; text-align:center}#tabMenus li a{ display:block; height:100%; color:#000000; text-decoration:none}#tabMenus li.current{background:#fff}#tabMenus li.usual{background:#ccc;}#tabCons{ clear:both;width:400px; margin:0 auto; overflow:hidden; border:#ccc solid 1px; border-top:none}#tabCons .con{ float:left; padding:10px; width:380px; display:none} /style  script $(document).ready(function(){ var j=0; $(\"#tabMenus li:first\").addClass(\"current\"); $(\"#tabCons div:first\").show(); $(\"#tabMenus li\").each(function(i){ $(this).click(function(){ $(this).addClass(\"current\").siblings().removeClass(); $(\"#tabCons div\").hide(); $(\"#tabCons div:eq(\" + i + \")\").show(); var t=setInterval(function(){ $(\"#tabMenus li:eq(\"+j+\")\").trigger(\"click\"); if(j 3){ j++; }else{ j=0; },1000) /script  body  ul id=\"tabMenus\"  li a href=\"#\" 1111 /a /li  li a href=\"#\" 2222 /a /li  li a href=\"#\" 3333 /a /li  li a href=\"#\" 4444 /a /li  /ul  div id=\"tabCons\"  div 1111 /div  div 2222 /div  div 3333 /div  div 4444 /div  /div  /body  /html 

希望本文所述对大家的jQuery程序设计有所帮助。