用js寫簡單選項卡 加 自動切換效果

上一篇:/kf/201203/121796.html

接上篇,這篇就實現可以自動切換的切換效果,用這種效果就可以做簡單的焦點圖瞭。
說明:
設置一個標識數字置為0,寫一個每過幾秒標識+1,執行切換效果的函數,然後執行。
當標識超過當前選項卡長度讓標識置為0。
在鼠標移到選項卡的時候關閉定時器,鼠標移走的時候打開定時器。
 
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>無標題文檔</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
<script>
window.onload = function(){

    tab("tab_t","li","tab_c","p","onmouseover")
    function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
        var tab_t = document.getElementById(tab_t);
        var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
        var tab_c = document.getElementById(tab_c);
        var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
        var len = tab_t_li.length;
        var i=0;
        var timer = null;
        var num=0;
            for(i=0; i<len; i++){
                tab_t_li[i].index = i;
                tab_t_li[i][evt] = function(){
                  clearInterval(timer);
                    num = this.index;
                    tab_change()
                }
                tab_t_li[i].onmouseout = function(){
                    autoplay();
                }
            }
       
        function tab_change(){
            for(i=0; i<len; i++){
                tab_t_li[i].className = '';
                tab_c_li[i].className = 'hide';
            }
            tab_t_li[num].className = 'act';
            tab_c_li[num].className = '';
        }
       
        function autoplay(){
          timer = setInterval(function(){
              num++;
                if(num>=len) num=0;
              tab_change();
            },1000);
        }
        autoplay();
    }
   
}
</script>
</head>

<body>

<p class="wrap">
  <ul id="tab_t">
    <li class="act">選擇1</li>
    <li>選擇2</li>
    <li>選擇3</li>
    <li>選擇4</li>
  </ul>
  <p id="tab_c">
    <p>內容1</p>
    <p class="hide">內容2</p>
    <p class="hide">內容3</p>
    <p class="hide">內容4</p>
  </p>
</p> 
 
</body>
</html>

摘自  jingangel
 

發佈留言