选项卡自动切换代码|自动轮播js源码
选项卡自动切换代码
直接复制代码另存html即可查看效果：查看效果
相关文档推荐：setInterval()定时函数学习工作总结
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选项卡自动切换-35ui.cn</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-size:12px;
line-height:22px;
}
ul, li {
list-style:none;
}
.tab {
}
.tab li {
width:100px;
font-size:14px;
height:25px;
line-height:25px;
text-align:center;
border:1px solid #999;
background:#CCC;
float:left;
margin:100px 0 0 10px;
cursor:pointer;
}
.tab li.active {
background:#f60;
color:#fff;
font-weight:bold;
}
#content {
clear:both;
padding:50px 0 0 100px;
}
#content li {
display:none;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var oBox=document.getElementById('box')
var oTab=document.getElementById('tab')
var aTabli=oTab.getElementsByTagName('li')
var oCon=document.getElementById('content')
var aConli=oCon.getElementsByTagName('li')
var i=0;
var timer=null;
var iNow=0;
for(i=0;i<aTabli.length;i++)
{
aTabli[i].index=i;
aTabli[i].onclick=function()
{
iNow=this.index;
tab();
}
}
function tab()
{
for(i=0;i<aTabli.length;i++)
{
aTabli[i].className=''
aConli[i].style.display='none'
}
aTabli[iNow].className='active'
aConli[iNow].style.display='block'
}
function next()
{
iNow++
if(iNow==aTabli.length)
{
iNow=0;
}
tab();
}
timer=setInterval(next,1000)
oBox.onmouseover=function()
{
clearInterval(timer)
};
oBox.onmouseout=function()
{
timer=setInterval(next,1000)
};
}
</script>
</head>
<body>
<div id="box">
<ul class="tab" id="tab">
<li class="active">标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
<ul id="content">
<li style="display:block;">对应标题111111</li>
<li>对应标题222222</li>
<li>对应标题33333</li>
</ul>
</div>
</body>
</html>
原文地址：http://www.35ui.cn/post/201101025886.html 标签：自动轮播源码轮播代码选项卡自动切换代码选项卡自动切换代码
上一条： div层绝对底部代码推荐
下一条： js选项卡代码带上一个和下一个选项卡代码
