He encontrado muchos ejemplos para mostrar/ocultar divs con un tiempo de espera en JavaScript, pero parece que no puedo resolver mi problema exacto aquí.
Tengo seis divs. Quiero pasar del 1 al 6 y luego de nuevo, cada 10 segundos. Mi código actual funciona en cuanto a ocultar el div original (siempre quiero que div #one se muestre primero en la carga de la página) después de 10 segundos y muestra el siguiente en secuencia.
¿Cómo puedo realizar un ciclo limpio a través de estos en orden cada 10 segundos?
$(document).ready( function () { startCycle(); }); function startCycle(){ setTimeout(function(){ document.getElementById('one').style.display = 'none'; document.getElementById('two').style.display = 'block'; document.getElementById('three').style.display = 'none'; document.getElementById('four').style.display = 'none'; document.getElementById('five').style.display = 'none'; document.getElementById('six').style.display = 'none'; }, 10000); // 10000ms = 10s } #one{ display: block; } #two, #three, #four, #five, #six{ display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <div id="one">Test One</div> <div id="two">Test Two</div> <div id="three">Test Three</div> <div id="four">Test Four</div> <div id="five">Test Five</div> <div id="six">Test Six</div>Le sugiero que coloque esos elementos div en un elemento contenedor, de modo que ya no necesite los atributos de id .
Luego, mientras usa jQuery, use hide y show llamadas. Puede utilizar el operador de resto ( % ) para "ciclar" una variable de índice.
En aras de verificar rápidamente esta solución, reduje la demora a medio segundo:
$(document).ready( function () { startCycle($("#container").children(), 0); }); function startCycle($elems, i) { $elems.hide().eq(i % $elems.length).show(); setTimeout(() => startCycle($elems, i + 1), 500); // 500ms = 0.5s } #container > div { display: none } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <div id="container"> <div>Test One</div> <div>Test Two</div> <div>Test Three</div> <div>Test Four</div> <div>Test Five</div> <div>Test Six</div> </div>¿Quizás algo así?
$(document).ready( function () { const eList = document.getElementsByClassName('hideMe'); Object.keys(eList).forEach((elem, index) => { setTimeout(function(){ toogle(eList[index]) }, 10000 * index); }); }); function toogle(elem) { if (elem) elem.classList.toggle('hide') } .hide { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <div id="one" class='hideMe hide'>Test One</div> <div id="two" class='hideMe hide'>Test Two</div> <div id="three" class='hideMe hide'>Test Three</div> <div id="four" class='hideMe hide'>Test Four</div> <div id="five" class='hideMe hide'>Test Five</div> <div id="six" class='hideMe hide'>Test Six</div>