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>