perticular間隔

Question

讓說我有六個分隔上我的HTML具有類似於

<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格。 3秒後，我想只顯示第二個div，並且想要隱藏其他div，以便此循環將通過第一個div到最後一個div並再次從第一個div開始。

Answer 1

這是可能的使用setInterval您可以在給定的時間間隔內顯示相應的div塊。

請參考代碼並輸入：

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

.post { 
 
    display: none; 
 
}

<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>

Answer 2

可以使用的setInterval的連續循環。

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")

<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>

Answer 3

使用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/