Question

假设我的html中有六个div，它们具有相同的类

<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>

我想显示第一个div 3秒并隐藏其他5个div。 3秒后，我想只显示第二个div，并希望隐藏其他div，以便此循环将通过第一个div到最后一个div并再次从第一个div开始。

Answer 1

使用setInterval可以在给定的时间间隔内显示相应的div块。

请参考代码并接受输入：

＆＃13;

var child = 1;
setInterval(function() {
  $(".post").show().not(".post:nth-child(" + child + ")").hide();
  if (child === 7) {
    child = 1;
  } else {
    child++;
  }
}, 600); // this time period is in ms, use 3000 for 3 secs

＆＃13;

.post {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">1</div>
<div class="post">2</div>
<div class="post">3</div>
<div class="post">4</div>
<div class="post">5</div>
<div class="post">6</div>

＆＃13;

Answer 2

使用setTimeout函数的另一个例子：

 $(".post").hide();
 var index = 0;

 function start() {
   setTimeout(function() {
     $(".post").hide();
     $(".post").eq(index).show();
     index++;
     if (index == $(".post").length) {
       index = 0;
     }
     start();
   }, 1000);
 }
 start();

https://jsfiddle.net/eanhrngn/

Answer 3

您可以使用setInterval进行连续循环。

＆＃13;

var i = 1;
var divs = $(".post");
divs.not(":first").hide();

var length = divs.length
setInterval(function() {

  divs.hide();

  $(".post").eq("" + i + "").show();
  i++;

  if (i == length) {
    i = 0;
  }

}, 3000);

$(".post")

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">1</div>
<div class="post">2</div>
<div class="post">3</div>
<div class="post">4</div>
<div class="post">5</div>
<div class="post">6</div>

＆＃13;

特定间隔后，从div列表中一次只显示一个div

3 个答案: