Script de cambio de imagen

Alextroy · #1 (**permalink**) 10/05/2006, 02:58

Hola, no entiendo mucho de Javascript, pero lo de copiar y pegar se me da estupendamente...
El caso es que estoy buscando un script que me cambie una imagen cada x segundos. Es decir, tengo 4 imagenes y pretendo que al cargar la página aparezca la 1º, a los dos segundos esta se cambie por la 2º, y así con la 3º y la 4º. Cuando haya terminado deberá volver de nuevo a la primera imagen.
He buscado en muchas bibliotecas de scripts y lo mas parecido que he encontrado es un script donde se cambia de imagen a pasar el puntero por encima, pero este no me vale...
¿podria echarme una mano alguien?? seguro que para los entendidos esto tiene que ser facilisimo...pero esque yo no tengo ni idea.
Muchas gracias de antemano.

caricatos · #2 (**permalink**) 10/05/2006, 03:14

Hola:

Probaré "a capella"

<img src="imagen1.gif" name="cambiable" />

con esa definición y el body así:

<body onload="setInterval('cambio()', 2000)" >

y en la zona de scripts;

var imagenes = [="imagen1.gif", "imagen2.gif", "imagen3.gif", "imagen4.gif"];
var actual = 0;

function cambiar() {
document.images.cambiable.src = imagenes[actual++ % imagenes.length];
}

Pruébalo y nos comentas si va bien...

Saludos

Alextroy · #3 (**permalink**) 10/05/2006, 04:03

Ok, lo primero gracias por tu ayuda.
Lo he puesto tal y como has dicho y al abrir la página me muestra la primera imagen pero a los dos segundos esta no cambia y aparece la tipica alerta de error de java y al desplegarlo muestra el mensaje de "se esperaba un objeto".
En cualquier caso te pongo el código que he hecho. Igual he puesto alguna barbaridad...espero que no.

<html>
<head>
<title>Pagina nueva 1</title>
<script LANGUAGE="JavaScript">
var imagenes = [="imagen1.gif", "imagen2.gif", "imagen3.gif", "imagen4.gif"];var actual = 0;
function cambiar() {
{document.images.cambiable.src = imagenes[actual++ %
imagenes.length];}
</script>
</head>
<body onload="setInterval('cambio()', 2000)">
<img src="imagen1.gif" name="cambiable" />
</body>
</html>

caricatos · #4 (**permalink**) 10/05/2006, 08:15

Hola:

A mi se me coló un signo igual al principio de la definición del array, y a ti se te coló una llave abierta duplicada...
También debe coincidir el nombre de la función... está bien que copies y pegues... pero tendrías que intentar aprender un poco...

Código:

<html>
<head>
<title>Pagina nueva 1</title>
<script type="text/javascript">
var imagenes = ["imagen1.gif", "imagen2.gif", "imagen3.gif", "imagen4.gif"];
var actual = 0;
function cambiar() {
document.images.cambiable.src = imagenes[actual++ % imagenes.length];
}
</script>
</head>
<body onload="setInterval('cambiar()', 2000)">
<img src="imagen1.gif" name="cambiable" />
</body>
</html>

Saludos

Alextroy · #5 (**permalink**) 10/05/2006, 09:56

Ok, gracias de nuevo.
Lo del nobre de la función ya lo corregí, que ademas de copiar también intento enteder lo que pongo, aunque no siempre con éxito...
El caso es que ya funciona, y es exactamente lo que queria.

caricatos · #6 (**permalink**) 10/05/2006, 10:17

Hola:

Ya que también intentas aprender, te voy a decir como mejorar el código (solo la idea) y comentarte un error que descubrí después...

Bueno, sobre la mejora, sencillamente precargar las imágenes antes de usar el script... no te líes, y en principio no te preocupes por ello, pero es bueno que lo sepas...

Antes de decirte el error te explicaré someramente el código...

setInterval es una función que se ejecuta cada n milisegundos... ese n es el segundo parámetro, y el primer parámetro es la función que debe ejecutarse (en el ejemplo es la función cambiar()...)

O sea que cambiar se ejecuta cada 2000 milisegundos... 2 segundos...

Ahora te explico lo que hace cambiar()... como verás, no tiene parámetros, y usa variables globales...
Esas variables son el array imagenes (cuatro) y actual que está inicializado a 0...

var actual = 0;

Y la única línea de la función asigna al objeto document.images.cambiables (a su atributo src) una nueva imagen...

Con imagenes[actual++ % imagenes.length] uso el valor de la variable actual y luego lo incremento y lo divido por la longitud del array imagenes (imagenes.length)... de esa manera, cuando actual vale 1, se divide por 4 (imagens.length)... y uso el resto (%)...
Cuando actual tenga un valor grande (1000... 100000000...) se dividirá por 4, y se obtendrá un resto entre 0 y 3...

Pues ya se complica un poco la cosa, pero el razonamiento siempre es bueno saberlo...

Ahora te comento el error que descubrí (el comentario del primer párrafo)...
Con este código la primera actualización se hace a los 4 segundos, y no a los 2...

¿Quién descubrirá el error...?

Saludos

JavierB · #7 (**permalink**) 10/05/2006, 10:33

Hola caricatos

Me ha gustado esta parte del código: imagenes[actual++ % imagenes.length]; Yo lo hubiera complicado con un par de líneas más de código, algún if, etc...

Sobre el error ¿que puedo decirte? En el mundo de la informática todo es cuestión de ceros y de unos

Saludos,