Hola, cómo puedo recorrer un array pero cada cierto tiempo? Por ejemplo, tengo un array con imagenes y quiero que se muestre cada una de las imagenes cada 10s. Lo he intendado con setTimeout y demás pero no lo he podido lograr.
entre Desarrolladores
Recibe ayuda de expertos
Registrate y pregunta
Es gratis y fácil
Recibe respuestas
Respuestas, votos y comentarios
Vota y selecciona respuestas
Recibe puntos, vota y da la solución
Pregunta
2 Respuestas
Quizá no estés usando bien el setTimeout, acá hice algo que creo que es lo que buscas.
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
var arrayImagenes = new Array();
arrayImagenes[0] = "http://caroufredsel.dev7studios.com/examples/images/small/sunbading.jpg";
arrayImagenes[1] = "http://caroufredsel.dev7studios.com/examples/images/small/cupcackes.jpg";
arrayImagenes[2] = "http://caroufredsel.dev7studios.com/examples/images/small/paris.jpg";
arrayImagenes[3] = "http://caroufredsel.dev7studios.com/examples/images/small/basketball.jpg";
var contador = 0;
window.onload = function(){
cambiarImagen();
}
cambiarImagen = function(){
if(contador == arrayImagenes.length){
contador = 0;
}
document.getElementById("imagenes").src = arrayImagenes[contador];
contador++;
setTimeout(cambiarImagen, 2000);
}
</script>
</head>
<body>
<div>
<img src="" alt="" id="imagenes">
</div>
</body>
</html>
Cambia el tiempo del setTimeout por el tiempo que creas conveniente, en tu caso sería 10000 milisegundos.
Por favor, accede o regístrate para añadir un comentario.
setTimeout solo se ejecutara una vez luego de determinado intervalo, lo que buscas seguramente es setInterval.
De alguna forma necesitas mantener el estado del ultimo elemento del array mostrado, asi que para mantenerlo y no utilizar una variable global lo mejor es englobar en un objeto.
<img id='cont' />
<script>
var slider = {
IMG: [ 'img1.jpg', 'img2.jpg', 'img3.jpg', 'img4' ],
TIME: 5000,
_ultimo: 0,
init: function() {
var that = this;
this.t = setInterval(that.change, this.TIME);
},
stop: function() {
stopInterval(this.t);
},
_change: function() {
this.ultimo++;
document.getElementById('cont').src = this.IMG[this.ultimo % this.img.length];
}
};
slider.init();
</script>
Por favor, accede o regístrate para añadir un comentario.
Por favor, accede o regístrate para responder a esta pregunta.
En el blog
-
- 406871
- 1
- Jul 5, 2015
Sin Respuesta
-
- 99
- 0
- Mar 19
-
- 65
- 1
- Feb 26
-
- 155
- 0
- Ene 30
-
- 611
- 0
- Nov 7, 2023
-
- 260
- 0
- Sep 19, 2023
-
- 286
- 0
- Ago 21, 2023
-
- 364
- 0
- May 14, 2023
-
- 324
- 0
- Abr 21, 2023
- ver todas
Preguntas relacionadas
Actividad Reciente
Santiago2610 comentó hace 6 días
Acualizar ChoiceField en djangoSantiago2610 preguntó Mar 19
Acualizar ChoiceField en djangogonzalss preguntó Feb 26
Script /boot/ scrapingParkJo preguntó Ene 30
No me deja instalar Oracleelporfirio respondió Ene 10
Actualizar la imagen con los datos devuelto en un …ovedg preguntó Dic 31, 2023
Actualizar la imagen con los datos devuelto en un …Ehdez preguntó Nov 7, 2023
Necesito en wordpress un pluging que me calcule la…pedrourday preguntó Sep 19, 2023
Alternativas a ThreeJS y BabylonJS?pedrourday preguntó Ago 21, 2023
¿Que tecnologias y lenguajes me recomiendan?Fabio respondió Jul 11, 2023
plugin de efecto circular 3d en imagenes
Ultimas Preguntas
Preguntas relacionadas
Usuarios Top
- Leonardo-Tadei
- 227320 Puntos
- Peter
- 150460 Puntos
- white
- 75880 Puntos
- carlossevi
- 63580 Puntos
- magarzon
- 30650 Puntos
- pregunton
- 20400 Puntos
Todos los Usuarios Usuarios Nuevos
...