jQuery实现自动切换播放的经典滑动门效果

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

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

运行效果截图如下：

在线演示地址如下：

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/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/脚本类型=' text/JavaScript ' src=' http : jquery 1。3 .2 .js '/脚本标题自动标签，自动切换播放的滑动门/标题/头部样式* { margin 33600划水：0;} ul { list-style : none } body { font-size :12 px } # Tabmenus { width :400 px；余量：100px自动0自动飞越：隐藏；border:#ccc固体1pxborder-bottom :无；} # tabMenus li { float:left宽度宽度：100像素宽度：25像素线高：25 px背景# ccctext-对齐：中心} #阿利标签菜单{显示：块高度：100%;color : # 000000 text-装饰： none } # Tabmenus Li。当前{背景： # fff } # Tabmenus Li。常见{背景： # CCC} # tabCons { clear:both宽度宽度：400pxmargin:0自动飞越：隐藏；border:#ccc固体1pxborder-top : none } # TabCons .con { float : leftadding :10 px宽度width :380 pxdisplay : none }/style script $(文档)。ready(function(){ var j=0；$(' # tab菜单Li : first ').添加CLaSS(' current ')；$('#tabCons div:first ').show()；$(' # tab菜单Li ').每个（函数{ $(这个)).单击(function(){ $(this)).addClass('current ').兄弟姐妹()。移除CLaSS()；$('#tabCons div ').hide()；$('#tabCons div:eq(' i ')').show()；})})var t=setInterval(function(){ $(' # tab菜单Li : eq(' j '))).触发器(“点击”)；if(JBOY3乐队){ j；} else { j=0；} }，1000)})/脚本正文ul id=' Tabmenus ' lia href=' # ' 1111/a/lilia href=' # ' 2222/a/lilia href=' # ' 3333/a/lilia href=' # ' 4444/a/Li/uldiv id=' TabCons ' div class=' con ' 1111/div class=' con ' 2222/div class=' con ' 3333/div div希望本文所述对大家的jQuery程序设计有所帮助。