tab選項卡切換效果（三）——自動切換加滑動切換

<script>
    function $(id){
        return typeof id==='string'?document.getElementById(id):id;
    }
    window.onload=tab;
    function tab(){
        //當前高亮顯示的頁籤的索引
        var index=0;
        var timer=null;
        //獲取所有的頁籤和要切換的內容
        var lis=$('notice_tit').getElementsByTagName('li');
        var divs=$('notice_con').getElementsByTagName('div');
        //遍歷每一個頁籤且給他們綁定事件
        for (var i=0;i<lis.length;i++){
            lis[i].id=i;
            lis[i].onmouseover=function(){
                clearInterval(timer);
                changeOption(this.id);
            }
            lis[i].onmouseout=function(){
                timer=setInterval(autoPlay,2000);
            }
        }
        if (timer){
            clearInterval(timer);
            timer=null;
        }
        //添加定時器，改變當前高亮的索引
        timer=setInterval(autoPlay,2000);
        function autoPlay(){                      //封裝函數方便調用
            index++;
            if (index>=lis.length){
                index=0;
            }
            changeOption(index);
        }
        function changeOption(curIndex){           //封裝函數方便調用
            for (var j=0;j<lis.length;j++){
                lis[j].className='';
                divs[j].style.display='none';
            }
            //高亮顯示當前頁籤
            lis[curIndex].className='select';
            divs[curIndex].style.display='block';
            index=curIndex;
        }
    }
</script>