左右自动切换的选项卡

思路：

（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>

 

posted on 2015-06-01 16:43  zhangjingyun  阅读(450)  评论(0)  编辑  收藏  举报