web前端|js教程
jQuery,自动切换,滑动门
web前端-js教程
本文实例讲述了jQuery实现自动切换播放的经典滑动门效果。分享给大家供大家参考。具体如下：
asp词典源码,ubuntu用什么版本,国外爬虫加热包,php ckplayer,南明seo优化lzw
这是一个滑动门代码，从外观上看，简洁经典，似乎与平时见到的滑动门没什么区别，不过它有一个重要的功能与众不同，那就是会自动切换【播放】滑动门的内容，像腾讯QQ登录后弹出的每日要闻一样，如果你再加以美化，那么就更完美无暇了。
导航源码分享,固态机械安装ubuntu,tomcat5 连接池,爬虫抖音评论,零基础学习php软件交流,千站seolzw
运行效果截图如下：
美容美发管理软件源码,只用ubuntu可以么,tomcat9.0线程池,nginx封爬虫,php 店铺距离,seo关键词引流怎么样lzw
在线演示地址如下：
/js//jquery-auto-cha-tab-style-codes/
具体代码如下：
autoTab,自动切换播放的滑动门*{ 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}$(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)})1111222233334444
1111
2222
3333
4444
如果觉得《jQuery实现自动切换播放的经典滑动门效果【jquery】》对你有帮助，请点赞、收藏，并留下你的观点哦！
