1

Quiero crear historias tipo instagram, pero no sé cómo hacer para al dar click en un botón, cada cierto tiempo pase al otro botón y así... vaya mostrando las imagenes que tiene la misma clase en la función.

<button id="btn" onclick="openHistory('imagen1')">Imagen 1</button>
<button id="btn" onclick="openHistory('imagen2')">Imagen 2</button>
<button id="btn" onclick="openHistory('imagen3')">Imagen 3</button>


<img id="imagen1" class="history" src="">
<img id="imagen2" class="history" src="">
<img id="imagen3" class="history" src="">


<script>
function openHistory(historyName) {
var i;
var x = document.getElementsByClassName("history");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";  
}
document.getElementById(historyName).style.display = "block";  
}
</script>

2 respuestas 2

3

No tienes que "pulsar botones". El pulsar un botón llama a una función, y lo que tú quieres es llamar a esa función. Puedes usar setTimeout o setInterval para lanzar cada cierto tiempo dicha función:

let historyElements= [ 'imagen1','imagen2','imagen3'];

for (let i=0;i < historyElements.length; i++) {
  setTimeout(openHistory,10000 * i /*milisegundos*/,historyElements[i]);
}

function openHistory(historyName) {
  let x = document.getElementsByClassName("history");
  for (let i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  document.getElementById(historyName).style.display = "block";  
}
2

Mediante setInterval, puedes hacer que una función se ejecute cada x milisegundos. En el ejemplo que te he puesto abajo, una vez pulsas uno de los botones, despues de mostrar la historia correspondiente se ejecuta una función (cada 10 segundos), que busca entre todas las imagenes aquella con el display="block", la oculta, y le pone el display="block" a la siguiente imagen

function openHistory(historyName) {
var i;
var x = document.getElementsByClassName("history");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";  
}
document.getElementById(historyName).style.display = "block";  
   setInterval(function(){ 
       let x = document.getElementsByClassName("history");
       let activo=False
       for (i = 0; i < x.length; i++) {
         if(activo==True){
           x[i].style.display == "block";
           break;
         }
         if(x[i].style.display == "block"){
            activo=True;
            x[i].style.display == "none";
         }
       }
    }, 10000);
}

Esto es una forma de hacerlo según lo planteas.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.