JavaScript - carrusel de imagenes

 
Vista:

carrusel de imagenes

Publicado por asun (2 intervenciones) el 18/06/2007 09:52:38
Estoy intentando hacer un carrusel de imagenes.
Todas las imagenes que uso se llaman imagX.gif
Uso el siguiente codigo pero no consigo que funcione a pesar de que no ne da error.
Me podeis echar una mano por favor?
<html>
<head>
<title>Carrusel de imagenes</title>
<script>
<!--
var imgnum=0;
var totalimagenes=6;
imagenes= new Array();
for (i=0;i<totalimagenes; i++)
{
imagenes[i]= new image();
imagenes[i].src= "imag"+i+".gif";
}

function graficosanimados()
{
document.image.src=imagenes[imgnum].src;
if (imgnum < totalimagenes-1)
{imgnum++;}
else
{imgnum=0;}
}
setTimeout("graficosanimados();",10);
}

//-->
</script>
</head>

<body onLoad="graficosanimados();">
<img src="imag2.gif">

</body>

</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

RE:carrusel de imagenes

Publicado por Gonzalo (107 intervenciones) el 18/06/2007 11:03:36
1. El objeto Image se llama así, con la I mayúscula, no image con la i minúscula.

... = new Image();

2. El segundo parámetro de setTimeout, el tiempo, va en milisegundos. Si pones 10, se llamará cada 10 milisegundos. Posiblemente lo que quieres decir es:

setTimeout(graficosanimados, 10000);

3. Al llamar por primera vez a graficosanimados en el onLoad del body nada te garantiza que las imágenes ya estén cargadas. Deberías o bien esperar un tiempo antes de empezar a cambiarlas (por ejemplo con onLoad="setTimeout(graficosanimados, 10000)" para usar el mismo tiempo que el resto) o podrías esperar a que todas las imagenes estén cargadas, registrando el onLoad de las imágenes a una función auxiliar que por ejemplo aumente un contador global o alguna forma similar de ir contando las que están cargadas ( poniendo imagenes[i].onLoad = imagencargada; en el bucle inicial y la función: function imagencargada() { contador++; if (contador == totalimagenes) setTimeout(graficosanimados, 10000); } que se encarga de iniciar tu carrusel.

4. Tendrás que darle un atributo id a la imagen y buscarla así. Eso de document.image.src no está bien:
<img src="imag2.gif" id="carruselDeImagenes">
y
document.getElementById("carruselDeImagenes").src = imagenes[imgnum].src;

5. Te sobra una llave de cierre } en graficosanimados. Y puedes cambiar el if ese por algo más elegante y práctico:

function graficosanimados() {
document.getElementById("carruselDeImagenes").src = imagenes[imgnum].src;
imgnum = (imgnum++) % totalimagenes;
setTimeout(graficosanimados,10000);
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:carrusel de imagenes

Publicado por Asun (2 intervenciones) el 18/06/2007 12:00:48
Muchas gracias. Supongo que se nota mucho que estoy empezando en esto
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:carrusel de imagenes

Publicado por Gonzalo (107 intervenciones) el 18/06/2007 14:26:32
Todos, en algún momento, hemos estado empezando, así que no te preocupes por eso. Ánimo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar