Показать только один DIV в то время из списка сНу последовательно после 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/