auto change div jquery

Question

我想让一个div自动隐藏并显示其他div像转换器。当我用多格主DIV中这是行不通的：

<div id="div1"> 

实际发生的是，它隐藏在里面的div（S） 的所有内容有什么办法让我的div（个），保存我的风格，并为我的div（s）做一个自动更换器？

HTML代码

<div id='container'> 
    <div id='div1' class='display' style="background-color: red;"> 
     <div id="mydiv" style=" left:200; width:100; background-color:#F605C6;"> 
      <div id="main_adv" class="a" style="position:absolute;text-align:left;width:673px;height:256px"> 
       <div id="Layer3" class="a" style="position:absolute;text-align:left;left:176px;top:56px;width:490px;height:171px" title=""></div> 
       <div id="img_adv" class="a" style="position:absolute;text-align:left;left:4px;top:55px;width:169px;height:172px;" title=""> 
        <img id="ri" class="a" src="thumbs/img1.png" /> 
       </div> 
       <div id="title_adv" class="a" style="position:absolute;text-align:right;left:4px;top:6px;width:662px;height:40px;" title=""> 
        <div style="position:absolute;text-align:right;right:6px;top:4px;"> 
         <span style="color:#000000;font-family:Arial;font-size:29px;right:5px">some text</span> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<div id='div2' class='display' style="background-color: green;"> 
    div2 
</div> 

<div id='div3' class='display' style="background-color: blue;"> 
    div3 
</div> 
</div> 
</body> 

Javascript代码

$('html').addClass('js'); 

$(function() { 
    var timer = setInterval(showDiv, 400); 
    var counter = 0; 

    function showDiv() { 
     if (counter == 0) { counter++; return; } 

     $('div','#container') 
      .stop() 
      .hide() 
      .filter(function() { return this.id.match('div' + counter); }) 
      .show('fast'); 

     counter == 16? counter = 0 : counter++; 
    } 
}); 

Answer 1

我写了continiously改变的div就像你问了一些基本代码：

jsfiddle.net/5jhuK/

HTML

<div id='container'> 
    <div id='div1' class='display' style="background-color: red;">div1</div> 
    <div id='div2' class='display' style="background-color: green;">div2</div> 
    <div id='div3' class='display' style="background-color: blue;">div3</div> 
</div> 

CSS

.display { 
    display: none; 
} 

JS（jQuer Y）

$(document).ready(function() { 

    var activeDiv = 1; 
    showDiv(activeDiv); // show first one because all are hidden by default 
    var timer = setInterval(changeDiv, 2000); 

    function changeDiv() { 
     activeDiv++; 
     if (activeDiv == 4) { 
      activeDiv = 1; 
     } 
     showDiv(activeDiv); 
    } 

    function showDiv(num) { 
     $('div.display').hide(); // hide all 
     $('#div' + num).fadeIn(); // show active 
    } 

}); 

这真的并不复杂，当你问的东西尽量简洁，去掉不必要的代码（如#mydiv）

Answer 2

几件事情：1。 HTML ID是唯一的，所以你可以做这样的事情如下： 2。你的代码在查找中缺少一个＃（例如“#div”+ counter） 3.你可以使用子选择器“>”来将div对齐一个级别d自己

var counter=1; 
function showDiv() { 


    $('#container > div').hide() 
    $("#div"+counter).show(); 

    counter == 3? counter = 1 : counter++; 

    }