您的位置：首页 > 其它

左右自动切换的选项卡

2015-06-01 16:43 387 查看

思路：

（1）先写一个点击显示对应内容的选项卡

（2）增加一个定时器，定时器里继续放一个选项卡

注：两个通过让对应的下标来联系起来

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
#ul_box{list-style: none;margin:0;padding:0;overflow: hidden;}
#ul_box{margin:0;padding:0;}
#ul_box li{float: left;width: 150px;height: 30px;border: 1px solid #ccc;}
#ul_box li.active{background: yellow;}
div{width: 200px;height: 200px;background: #ccc;display: none;}
</style>
</head>
<body>
<ul id="ul_box">
<li>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</li>
</ul>
<div>你好</div>
<div>我好</div>
<div>大家好</div>
<div>每天</div>
</body>
<script type="text/javascript">
var oUl=document.getElementById('ul_box');
var aLi=oUl.getElementsByTagName('li');
var aDiv=document.getElementsByTagName('div');
var iNum=0;
aLi[iNum].className='active';
aDiv[iNum].style.display='block';
for(i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onclick=function(){
for(i=0;i<aLi.length;i++){
aLi[i].className='';
aDiv[i].style.display='none';
}
iNum=this.index;
this.className='active';
aDiv[iNum].style.display='block';
}
}
setInterval(function(){
iNum++;
if(iNum>=aLi.length){
iNum=0;
}
for(i=0;i<aLi.length;i++){
aLi[i].className='';
aDiv[i].style.display='none';
}
aLi[iNum].className='active';
aDiv[iNum].style.display='block';
},3000)
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航