基于jQuery实现的简单滑动门的雏形代码

发布时间：2018-09-17 08:31:00 所属栏目：政策来源：站长网

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

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

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火网特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!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=gbk" /> <script type="text/javascript" src="/uploads/common/js/jquery-1.4.2.min.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 class="con">1111</div> <div class="con">2222</div> <div class="con">3333</div> <div class="con">4444</div> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：南平站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!