jQuery实现自动切换播放的经典滑动门效果
jQuery实现自动切换播放的经典滑动门效果
发布时间:2016-12-30 来源:查字典编辑
摘要:本文实例讲述了jQuery实现自动切换播放的经典滑动门效果。分享给大家供大家参考。具体如下:这是一个滑动门代码,从外观上看,简洁经典,似乎与...

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

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

运行效果截图如下:

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

在线演示地址如下:

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程序设计有所帮助。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类