html页面js实现多个div定时轮流出现

<style type="text/css">
#con{ border:5px solid #ccc;padding:10px;font-size:30px;}
.a{ border:2px solid #ccc;background-color:#eee;}
</style>
<div id="con"><!--外层容器-->
    <div class="a">111111</div>
    <div class="a" style="display:none">222222</div>
    <div class="a" style="display:none">333333</div>
    <div class="a" style="display:none">444444</div>
    <div class="a" style="display:none">555555</div>
    <div class="a" style="display:none">666666</div>
    <div class="a" style="display:none">777777</div>
</div>
<script type="text/javascript">
<!--
function G(e){return document.getElementById(e);}
function myPlayer(con, child, speed){
    var ts = G(con).getElementsByTagName(child),//获取容器内需要轮流显示的子元素：这里是 div
        timer,k=0;
        var timer = setInterval(function(){//定义时间控制器
            for(var m=0;m<ts.length;m++){ts[m].style.display='none';}//先隐藏全部，此处效率降低，可以考虑不用循环
            ts[k].style.display='';//显示需要显示的
            if(k>ts.length-2){
               k=0;
            }else{
               k++;
            }
        },speed);
}
myPlayer('con','div',1000);//调用，参数一外层元素ID，参数二循环元素名称，间隔时间：秒数的1000倍
-->
</script>

转载于:https://www.cnblogs.com/lljinz/archive/2011/06/02/2068645.html