Imágenes en bucle HTML

NoRelaX #1 Ene '14

Buenas, estoy estudiando un ciclo formativo de Desarrollo, y estoy trabajando en una página web para un trabajo. El caso es que quiero (no me lo piden pero me he encabezonado en hacerlo) meter imágenes en bucle. Es decir, que aparezca una imagen que vaya cambiando automáticamente. He buscado en Google y en cada foro que encuentro dan una solución distinta, pero ninguna hasta ahora.

Lo estoy intentando hacer empleando un bucle 'for' en Javascript, con un código similar a este:

 <body> 
<div id="principal"> 
<script type="text/javascript"> 
for(var a=0; a<5; a++){ 
document.write()<img src=....>
} 
</script> 
</div> 
</body>

El programa me tira error de sintaxis en la 5ª de estas lineas. Por si es relevante, estoy usando Dreamweaver.
¿Voy por buen camino o ese código no sirve para nada? Ya que estoy aprendiendo, me encantaría que alguien me explicara un poco este tema.

Molto grazzie

LoBezNo #2 Ene '14

El código que quieres imprimir con el document.write() tiene que ir como argumento del metodo write().

Prueba algo así(suponiendo que tengas una carpeta images con la ristra imagenX.png):

for(var a=0; a<5; a++){ 
    document.write("<img src='images/imagen" + a + ".png' />");
}

También puedes crearte un array de imagenes, y luego un timer que cada X segundos te cambie una imagen por la siguiente del array.

1 respuesta

NickNack #3 Ene '14 :psyduck:

Lo del array, pese a que suena un poco mas complicado (que no es mucho mas complicado) es mejor idea a la hora de luego poder hacer cambios sin tener que atarte a una estructura. Luego para el timer puedes usar SetInterval o SetTimer y sacar un parametro aleatorio del array que usas.

Te pongo una pequeña referencia por si no te enteras :X

Un JS con el array definido y los parametros que quieras (solo la imagen sera mas simple el array, pero recuerda que lo puedes hacer lo profundo que quieras (JSON es la caña para esto) definiendote asi cualquier parametro que necesites para las imagenes. Una vez tengas esto te creas una funcion para hacer el cambio y ya la defines como quieras (aleatorio, secuencial... blah blah). Por ultimo en las imagenes tienes que meter un setinterval para que cada X ms lo cambie. Esto lo puedes meter dentro de la funcion de cambio para que se autoejecute cada X. Es un poco guarro pero funcionara.

Facil y sencillo, suena mas complicado de lo que es xD

1 respuesta

NoRelaX #4 Ene '14

#2 Cierto, ese pequeño cambio en el código me ha resuelto el error de sintaxis. Ahora el error me aparece en la línea siguiente, en la que cierro la llave.

#3 Joder macho, los array se me dan como el puto culo. Ya me pondré a ello, gracias XD

1 respuesta

LoBezNo #5 Ene '14

#4 algo así te podría sacar del apuro, pero no es lo más optimizado ni por asomo:

<head>
	<script>
	var i = 0;
	var images = new Array("images/ima1.png","images/ima2.png","images/ima3.png","images/ima4.png");
	function cambia(){
		if (i <= images.length - 1) {
			document.galeria.src = images[i];
			i++;
		}else{
			i = 0;
		}
	}
	setInterval(cambia,2500);
	</script>
</head>
<body>
	<img src="" name="galeria" />
</body>
</html>

2 1 respuesta

NoRelaX #6 Ene '14

#5 Mil gracias tío, pero, suponiendo que yo tengo las imágenes que quiero insertar en el escritorio, ¿cómo las metería en el array?

#8 y la línea que hay dentro del <body>?

2 respuestas

SpiuK #7 Ene '14

#6 De esto se lo justo,pero imagino que te tocaria dar la ruta absoluta. Igual es mejor que lo hagas todo dentro de una carpeta y utilices rutas relativas.

LoBezNo #8 Ene '14

#6 Te recomiendo que te hagas una carpeta donde tienes el html donde las vas a cargar, y dentro de esta mete las imagenes que vas a utilizar.

En el ejemplo que te he puesto, mi carpeta sería images y las imagenes dentro serían ima1.png, ima2.png, ima3.png y ima4.png

1 respuesta

Imágenes en bucle HTML

Usuarios habituales

Tags