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

发布时间：2018-09-14 13:06:33 所属栏目：创业来源：站长网

导读：一个基于 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>
提醒：可修改儿女码再运行!

（编辑：河北网）

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

首富马斯克谈成功？他	从先行者到制定者，轻
中国互联网的新一轮机	马斯克想辞职做专业网