js实现简单选项卡与自动切换效果的方法
本文实例讲述了js实现简单选项卡与自动切换效果的方法。分享给大家供大家参考。具体分析如下：
这里再上篇《js实现简单的可切换选项卡效果》基础上，进一步实现可以自动切换的切换效果，用这种效果就可以做简单的焦点图了。
说明：
设置一个标识数字置为0，写一个每过几秒标识+1,执行切换效果的函数，然后执行。
当标识超过当前选项卡长度让标识置为0。
在鼠标移到选项卡的时候关闭定时器，鼠标移走的时候打开定时器。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="gb2312"/>
<title>无标题文档</title>
<style>
body,ul,li{
margin:0;
padding:0;
font:12px/1.5arial;
}
ul,li{
list-style:none;
}
.wrap{
width:500px;
margin:20pxauto;
}
.hide{
display:none;
}
#tab_t{
height:25px;
border-bottom:1pxsolid#ccc;
}
#tab_tli{
float:left;
width:80px;
height:24px;
line-height:24px;
margin:04px;
text-align:center;
border:1pxsolid#ccc;
border-bottom:none;
background:#f5f5f5;
cursor:pointer
}
#tab_t.act{
position:relative;
height:25px;
margin-bottom:-1px;
background:#fff;
}
#tab_c{
border:1pxsolid#ccc;
border-top:none;
padding:20px;
}
</style>
<script>
window.onload=function(){
tab("tab_t","li","tab_c","div","onmouseover")
functiontab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
vartab_t=document.getElementById(tab_t);
vartab_t_li=tab_t.getElementsByTagName(tab_t_tag);
vartab_c=document.getElementById(tab_c);
vartab_c_li=tab_c.getElementsByTagName(tag_c_tag);
varlen=tab_t_li.length;
vari=0;
vartimer=null;
varnum=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();
}
}
functiontab_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='';
}
functionautoplay(){
timer=setInterval(function(){
num++;
if(num>=len)num=0;
tab_change();
},1000);
}
autoplay();
}
}
</script>
</head>
<body>
<divclass="wrap">
<ulid="tab_t">
<liclass="act">选择1</li>
<li>选择2</li>
<li>选择3</li>
<li>选择4</li>
</ul>
<divid="tab_c">
<div>内容1</div>
<divclass="hide">内容2</div>
<divclass="hide">内容3</div>
<divclass="hide">内容4</div>
</div>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。