基本信息

---

下载

   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

---

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　

支付宝支付

微信支付

   源码介绍

---

该实例以PC端爱奇艺官网首页为例，实现tab切换效果，包括鼠标移动切换、自动切换

var index=1;
var timer=null;


timer = setInterval(autoPlay,3000);
var tds=document.getElementsByTagName('td');
var lis=document.getElementsByTagName('li');
var spans=document.getElementById('head').getElementsByTagName('span');

for(var i=0;i<tds.length;i ){
tds[i].onmouseover=function(){
clearInterval(timer);//鼠标移入，清除定时器
for(var j=0;j<tds.length;j ){
if(this==tds[j]){
tds[j].className='select';
lis[j].className='block';
spans[3*j].className='span1';
spans[3*j 1].className='span2';
index=j 1;//鼠标离开后切换到下一张图片
}
else{
tds[j].className='';
lis[j].className='';
spans[3*j].className='';
spans[3*j 1].className='';
}
}
}
tds[i].onmouseout = function(){
timer=setInterval(autoPlay,3000);//鼠标离开，继续自动切换
}
}

function autoPlay(){
if(index>=tds.length){
index=0;
};
changeOption(index);
index ;
}

function changeOption(curIndex){
for(var j=0;j<tds.length;j ){
tds[j].className='';
lis[j].className='';
spans[3*j].className='';
spans[3*j 1].className='';
};
tds[curIndex].className='select';
lis[curIndex].className='block';
spans[3*curIndex].className='span1';
spans[3*curIndex 1].className='span2';
index=curIndex;
}