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倍
-->这一段网页循环显示隐藏div的代码里面，有没有办法改成分行显示，不要同一行显示？
    <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>
第一行显示后，第一行隐藏，第一行就变成空白，然后显示第二行，不要让第二行的内容跳上第一行

解决方案 »

  1.   

    <div class="a" style="visibility:visible;">111111</div>
    <div class="a" style="visibility:hidden;"222222</div>
    <div class="a" style="visibility:hidden;"333333</div>
    <div class="a" style="visibility:hidden;"444444</div>
    <div class="a" style="visibility:hidden;">555555</div>
    <div class="a" style="visibility:hidden;">666666</div>
    <div class="a" style="visibility:hidden;">777777</div>
    用visibility代替display,visible代替block,hidden代替none.
    visibility与display的区别是，visibility隐藏后仍然占据空间。
      

  2.   


    <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" style="visibility:visible;">111111</div>
    <div class="a" style="visibility:hidden;">222222</div>
    <div class="a" style="visibility:hidden;">333333</div>
    <div class="a" style="visibility:hidden;">444444</div>
    <div class="a" style="visibility:hidden;">555555</div>
    <div class="a" style="visibility:hidden;">666666</div>
    <div class="a" style="visibility:hidden;">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.visibility='none';}//先隐藏全部，此处效率降低，可以考虑不用循环
                ts[k].style.visibility='';//显示需要显示的
                if(k>ts.length-2){
                   k=0;
                }else{
                   k++;
                }
            },speed);}
    myPlayer('con','div',1000);//调用，参数一外层元素ID，参数二循环元素名称，间隔时间：秒数的1000倍
    -->修改了没有用
      

  3.   

    <html>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!--<script type="text/javascript" src="http://www.wanmei.com/public/js/jq_132.js"></script>-->
    <style>
        a.adown:hover{background:url(banner_07.jpg)}
    a.adown{background:url(banner_09.jpg); display:block;}
        </style>
        <body >  
        <style type="text/css">
    #con{ border:5px solid #ccc;padding:10px;font-size:30px; float:left;}
    .a{ border:2px solid #ccc;background-color:#eee; height:100px;}
    </style>
    <div id="con"><div class="a">111111</div></div>
    <div id="con" style=" visibility:hidden;"><div class="a">222222</div></div>
    <div id="con" style=" visibility:hidden;"><div class="a">333333</div></div>
    <div id="con" style=" visibility:hidden;"><div class="a">444444</div></div>
    <div id="con" style=" visibility:hidden;"><div class="a">555555</div></div>
    <div id="con" style=" visibility:hidden;"><div class="a">666666</div></div>
    <div id="con" style=" visibility:hidden;"><div class="a">777777</div></div>
    <script type="text/javascript">
    <!--
    function myPlayer(child, speed){  var ts = document.getElementsByTagName(child),//获取容器内需要轮流显示的子元素：这里是 div
      timer,k=0,arr = [];
      for(var i = 0; i < ts.length; i++){
    if(ts[i].id == 'con'){
    arr.push(ts[i]);
    }  
      }
      var timer = setInterval(function(){//定义时间控制器
      for(var m=0;m<arr.length;m++){arr[m].style.visibility='hidden';}//先隐藏全部，此处效率降低，可以考虑不用循环
      arr[k].style.visibility='visible';//显示需要显示的
      if(k>arr.length-2){
      k=0;
      }else{
      k++;
      }
      },speed);}
    myPlayer('div',1000);//调用，参数一外层元素ID，参数二循环元素名称，间隔时间：秒数的1000倍
    -->
    </script>
        
            
        </body>
    </html>  
    楼主看看是这意思吗？
      

  4.   

      for(var m=0;m<ts.length;m++){ts[m].style.visibility='none';}//先隐藏全部，此处效率降低，可以考虑不用循环
      ts[k].style.visibility='';//显示需要显示的
    上面的地方没有改
    ts[m].style.visibility='none'改成ts[m].style.visibility='hidden'
      ts[k].style.visibility='';//显示需要显示的 如果要显示就该成ts[k].style.visibility='visible';//
      

  5.   

    <div id="con"><!--外层容器-->
      <div class="a" style="visibility:visible;">111111</div>
    <div class="a" style="visibility:hidden;">222222></div>
    <div class="a" style="visibility:hidden;">333333</div>
    <div class="a" style="visibility:hidden;">444444</div>
    <div class="a" style="visibility:hidden;">555555</div>
    <div class="a" style="visibility:hidden;">666666</div>
    <div class="a" style="visibility:hidden;">777777</div>
    </div>
    <script type="text/javascript">
    var timer;
    var k=0;
    function G(e){return document.getElementById(e);}
    function myPlayer(con, child, speed){  var ts = G(con).getElementsByTagName(child),//获取容器内需要轮流显示的子元素：这里是 div
      timer = setInterval(function(){//定义时间控制器
      for(var m=0;m<ts.length;m++){ts[m].style.visibility='hidden';}//先隐藏全部，此处效率降低，可以考虑不用循环
      ts[k].style.visibility='visible';//显示需要显示的
      if(k>ts.length-2){
      k=0;
      }else{
      k++;
      }
      },speed);}
    myPlayer('con','div',1000);//调用，参数一外层元素ID，参数二循环元素名称，间隔时间：秒数的1000倍
    </script>
    完整代码如上，测试通过
      

  6.   

    主要就是display和visibility的区别，seachers阐述干净利落