上海益国网络科技有限公司
上海专业网站建设一条龙服务

学无止境!

这里摘有最贴近网站程序使用的方方面面相关技术文档~

021-20906540
AM 9:30-12:00 PM:2:00-5:30
您当前位置:首页 >> 技术支持 >>  技术专辑 >>  滑动门-TAB切换

jquery 滑动门随时间自动切换

<script language="javascript">

$(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>



HTML代码如下:

<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>



以上JS是支持的是四项自动切换,更多项请修改里面的数字3

tabCons 在自动切换是是以DIV元素来取得的,如果框架的内容较为复杂也可以使用UL.

简单点说tabCons下面的起始总框架的外层HTML元素是框架内部完整代码里面唯一的一个元素.



完整代码如下:

<!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=gb2312" />
<title>上海动人网络整理-JQ自动切换</title>
<script type="text/javascript" src="http://www.siqiji.net/codes/jq/jquery-1.7.2.min.js"></script>
<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 language="javascript">
$(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>
</head>
 
<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>


做网站找动人网络!建站一条龙服务找动人网络!站长学习尽在站长培训网
  • 兼容性最好的滑动门
  • 拉风琴式的JS滑动门
  • TOP