Imágenes que cambian cada cierto tiempo

julili · #1 (**permalink**) 01/12/2011, 16:37

Hola! Necesito hacer una especia de galería de imágenes, que cambien cada x tiempo. He encontrado un código muy sencillito para ello, pero no consigo que repita la función cada tres segundos como le indico. Sé que el fallo será una tontería, pero no lo veo.. me podéis echar una mano??

function imagenes(){
var imagenes= new Array();
var contador=0;
//var imagen=document.getElementById("miImagen");
imagenes [0]="images/fotoCiencias.jpg";
imagenes [1]="images/fotoDerecho.jpg";
imagenes [2]="images/fotoEconomicas.jpg";
imagenes [3]="images/fotoEducacion.jpg";

setTimeout(function() {
var imagen = document.getElementById('miImagen');
var actual = contador > imagenes.length? 0: contador+1;
imagen.src = imagenes[actual];
contador = actual;
},3000);

}

En el HTML sólo tengo esto puesto

<img src="" alt="imagen1" id="miImagen" />

¿alguien me ayuda?
Gracias

lubtufano · #2 (**permalink**) 01/12/2011, 18:41

Hay que cambiar algunas cosas, primero es mejor usar setInterval en vez de setTimeout, tambien hay que modificar un poco el operador if para reiniciar correctamente el recorrido de las imagenes.

Código Javascript:

Ver originalfunction imagenes(){
var imagenes= new Array();
var contador=0;
//var imagen=document.getElementById("miImagen");
imagenes [0]="images/fotoCiencias.jpg";
imagenes [1]="images/fotoDerecho.jpg";
imagenes [2]="images/fotoEconomicas.jpg";
imagenes [3]="images/fotoEducacion.jpg";
 
setInterval(function() {
var imagen = document.getElementById('miImagen');
var actual = contador >= (imagenes.length-1)? 0: contador+1;
imagen.src = imagenes[actual];
contador = actual;
},3000);
}

Con esto debe funcionar solo se necesita llamar a la función imagenes() en el evento onload de <body>. Además es conveniente colocar en el atributo src de <img> la primera imagen.

Código HTML:

Ver original<body onload="imagenes()">
<img src="images/fotoCiencias.jpg" alt="imagen1" id="miImagen" />

julili · #3 (**permalink**) 02/12/2011, 11:30

Muchas gracias! Sabía que era poco lo que fallaba pero no lo veía!