自动切换--选项卡 

<!doctype html>
<meta charset="utf-8">
<title>自动切换--选项卡</title>
<style>
    html,body,ul,li{margin:0;padding:0;}
    ul{list-style-type:none;}
    .hide{ display:none;}
    .tab,.con{
        margin:0 auto;
        width:500px;
    }
    .tab{
        height:37px;
        border-bottom:1px solid #ccc;
        margin-top:100px;
    }
    .tab ul{
        margin-bottom:-1px;
        _position:relative;
    }
    .tab li{
        float:left;
        width:84px;
        text-align:center;
        line-height:37px;
        cursor:pointer;
    }
    .tab li.cur{
        border:1px solid #ccc;
        border-bottom:none;
        height:37px;
        background:#fff;
        font-weight:bold;
    }
    .con{
        height:300px;
        border:1px solid #ccc;
        border-top:none;
        width:498px;
    }
</style>

<div class="tab" id="tabs">
    <ul>
        <li class="cur" >今日新闻
        <li>标题1
        <li>标题2
    </ul>
</div>
<div class="con" id="cons">
    <div>11111111111111</div>
    <div class="hide">222222222222222222</div>
    <div class="hide">3333333333333333</div>
</div>


<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){


var ele = $(".tab li"),   //变量   *******优化******
    cur = "cur",
    nums = ele.length, 
    index = 0,
    bbbbb=6666;
   

    fun = function (){
            index++;
            if(index == nums) index = 0;

            ele.eq(index).addClass(cur).siblings().removeClass(cur); 
            $(".con > div").eq(index).show().siblings().hide();     
    },
    st = setInterval(fun,2000);


/*fun;
var a=bbbbb;
console.log(a);*/

    ele.hover(
      function () {
          clearInterval(st);
        
      },
          function () {
        st = setInterval(fun,2000);
      });

      ele.mouseover(function(){
          index = ele.index(this)-1;
          fun();

      });

})

</script>

 

posted @ 2014-05-24 15:35  Shimily  阅读(235)  评论(0)    收藏  举报