一个页面多个自动切换滑动门显示源代码
<!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="http:-//www.-codefans-.net/ajaxjs/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 class="con">1111</div> <div class="con">2222</div> <div class="con">3333</div> <div class="con">4444</div> </div> </body> </html>要实现多地方调用，当然优先考虑把ID改成class
<style> *{ margin:0; padding:0;} ul{ list-style:none} body{ font-size:12px} .tabMenus{ width:400px; margin: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} .con{ height:30px;display: none; } </style> <script> $(document).ready(function(){ $(".tabCons").each(function(i,item){ var li=$(".tabMenus li",$(this)); var div=$("div",$(this)); var l=li.size(); var n=0; li.eq(0).addClass("current"); div.eq(0).show(); setInterval(function(){ n++; if(n>=l)n=0; li.eq(n).addClass("current").siblings().removeClass(); div.hide().eq(n).show(); },1000) }) }) </script> <body> <div class="tabCons"> <ul class="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 class="con">1111</div> <div class="con">2222</div> <div class="con">3333</div> <div class="con">4444</div> </div> <div class="tabCons"> <ul class="tabMenus"> <li><a href="#">1111</a></li> <li><a href="#">2222</a></li> <li><a href="#">3333</a></li> </ul> <div class="con">1111</div> <div class="con">2222</div> <div class="con">3333</div> </div> <div class="tabCons"> <ul class="tabMenus"> <li><a href="#">1111</a></li> <li><a href="#">2222</a></li> </ul> <div class="con">1111</div> <div class="con">2222</div> </div>