Tengo una sección donde tengo 3 encabezados para esa sección y quiero mostrarlos uno por uno con un intervalo de 10 segundos.
sería como si en el inicio tuviera un encabezado y su contenido y luego, después de 10 segundos, el texto dentro del encabezado cambiará y después de 10 segundos volverá a cambiar
<h2>helllo world</h2> <h2>helllo world 2</h2> <h2>helllo world 3</h2>tengo 3 encabezados y tengo que mostrarlos uno por uno,
en mi código, me gusta esto deshabilitado todo y luego mostré uno, pero tengo problemas para repetirlo
<body> <h1>hellow orld</h1> <h1>hellow orld2</h1> <h1>hellow orld3</h1> <script> let myarr = document.querySelectorAll('h1'); let myindex = 0; console.log(myarr) for (let index2 = 0; index2 < 10000; index2++) { one(); setTimeout(impFunct, 1000); } function one() { myarr.forEach(element => { element.style.display = 'none'; }); myarr[myindex].style.display = 'block'; } function impFunct() { if(myindex==2) {myindex=0; return;} myindex++ console.log(myindex); } </script> </body>todo esto lo estoy haciendo para trabajar en wordpress si conocen algun plugin o algun metodo para hacer lo mismo.
por favor ayuda
<!DOCTYPE html> <body> <h1>hellow orld</h1> <h1>hellow orld2</h1> <h1>hellow orld3</h1> <script> let myarr = document.querySelectorAll('h1'); let myindex = 0; timeout(); function timeout() { setTimeout(function () { myarr.forEach(element => { element.style.display = 'none'; }); myarr[myindex].style.display = 'block'; if(myindex == 2){ myindex = 0; } else { myindex++; } timeout(); }, 1000); } </script> </body> </html> <body> <h1>hellow orld1</h1> <h1>hellow orld2</h1> <h1>hellow orld3</h1> <script> let headings = document.querySelectorAll('h1'); let currentHeading = 0; headings.forEach(heading => heading.style.display='none') const showNextHeading = (intervalId) => { headings.forEach((heading, i) => { i === currentHeading ? heading.style.display = 'block' : heading.style.display = 'none' }) currentHeading +=1 // if you don't want headings to keep changing forever uncomment line bellow // if(currentHeading === 3) clearInterval(intervalId) if (currentHeading === 3) currentHeading = 0 } showNextHeading() const intervalId = setInterval(() => showNextHeading(intervalId), 1000); </script> </body>