如何每2秒显示不同的div？

Question

我需要div从头开始每隔2秒逐个显示。当显示一个div时，不应显示剩余的div

这是小提琴：http://jsfiddle.net/jRmrp/71/

HTML

<div>
<div id="box1" style="background-color:#0000FF">
 <h3>This is a heading in a div element</h3>

<p>This is some text in a div element.</p>
</div>

 <div id="box2" style="background-color:red">
 <h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>

<div id="box3" style="background-color:green">
 <h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>

 <div id="box4" style="background-color:yellow">
 <h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
 </div>

<div id="box5" style="background-color:orange">
 <h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>

</div>

帮我解决这个问题。

Answer 1

使用setInterval：

http://jsfiddle.net/9fqd3p8o/

var id = -1;
$('#container').children().hide();
$('#box1').show();
setInterval(function(){
    id = ++id % 5;
    console.log(id);
    $('#container').children().hide(); 
    $('#box' + (id + 1)).show(); 
},2000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="container">
<div id="box1" style="background-color:#0000FF">
     <h3>This is a heading in a div element</h3>

    <p>This is some text in a div element.</p>
</div>
<div id="box2" style="background-color:red">
     <h3>This is a heading in a div element</h3>
    <p>This is some text in a div element.</p>
</div>
<div id="box3" style="background-color:green">
     <h3>This is a heading in a div element</h3>
    <p>This is some text in a div element.</p>
</div>
<div id="box4" style="background-color:yellow">
     <h3>This is a heading in a div element</h3>
    <p>This is some text in a div element.</p>
</div>
<div id="box5" style="background-color:orange">
     <h3>This is a heading in a div element</h3>
    <p>This is some text in a div element.</p>
</div>
</div>

Answer 2

您可以使用setInterval()，尝试下面的示例

＆＃13;

＆＃13;

var id = 1;
setInterval(function () {
  $('#box'+id).hide();
  id++;
  if (id > 5) {
    id = 1;
  }
  $('#box'+id).fadeIn(200);
  
}, 2000);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<div id="box1" style="background-color:#0000FF;">
 <h3>This is a heading in a div element</h3>

<p>This is some text in a div element.</p>
</div>

 <div id="box2" style="background-color:red; display: none;">
 <h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>

<div id="box3" style="background-color:green; display: none;">
 <h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>

 <div id="box4" style="background-color:yellow; display: none;">
 <h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
 </div>

<div id="box5" style="background-color:orange; display: none;">
 <h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以在每个div中进行课程编写以下代码： -

var currentIndex = 0;
$(".box:not(:eq("+ currentIndex +"))").hide();

var totalDiv = $(".box").length;

setInterval(function(){
     currentIndex = (currentIndex + 1) % totalDiv;

    $(".box").hide();
     $(".box").eq(currentIndex).show();

},2000);

演示：

http://jsfiddle.net/jRmrp/72/