JavaScript - cambio de imagenes cada cierto tiempo

   
Vista:

cambio de imagenes cada cierto tiempo

Publicado por Marta (2 intervenciones) el 17/06/2010 10:43:47
Hola a todos! Vereis, tengo un problemilla con el tema imágenes en html con javascript. Resulta que quiero que alrededor de mi pagina, salgan imagenes que cambien automaticamente, he conseguido que solo cambie la primera de ellas, pero las demas no cambian. la verdad es que el tema java lo tengo en los pies, hace mil que no programo, y ando bastante perdida. Os dejo el codigo para que veais lo que quiero hacer. Un saludo y graciasss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<html>
<head>
      <script language="javascript">
 	var imagenes=new Array()
 
	imagenes[0]=new Image (300,400);
	imagenes[0].src="images/andamio1.gif"
	imagenes[1]=new Image (300,400);
	imagenes[1].src="images/andamio2.gif"
	cont=0
	function presImagen()
	{
		if (document.all){
			document.getElementById('foto').filters.blendTrans.apply()
			document.getElementById('foto').src=imagenes[cont].src
			document.getElementById('foto').filters.blendTrans.play()
		}
		else
		{
			document.images.foto.src = imagenes[cont].src
		}
		if (cont < imagenes.length-1)
		{cont ++}
		else
		{cont=0}
		tiempo=window.setTimeout('presImagen()',5000)
		//cada 5000 milisegundos (5 seg.) cambia la imagen.
		//cambia la cantidad por el tiempo que quieras que transcurra entre imagen e imagen
	}
 
	</script>
 
	<style type="text/css">
	  A:link {color:blue}
        A:visited {color:blue}
	  A:hover {color:red;}
      </style>
	<title>INICIO</title>
</head>
<body style="height:100%;width:100%;background-color:white;color:black;" onLoad="presImagen()">
<table style="width:100%;height:100%;text-align:left;" border="1" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="text-align:center; background-color:white;width:10%;height:20%;">
        <img id="foto" style="width:28.75%;height:100%;" src="images/andamio2.gif" style="filter:blendTrans(duration=3)">
        <img id="foto" style="width:28.75%;height:100%;" src="images/andamio1.gif" style="filter:blendTrans(duration=3)">
        <img id="foto" style="width:28.75%;height:100%;" src="images/andamio2.gif" style="filter:blendTrans(duration=3)">
      </td>


bueno luego ya iria el resto de la pagina, que no lo pongo porque no hace nada mas con el script.
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:cambio de imagenes cada cierto tiempo

Publicado por Marta (2 intervenciones) el 17/06/2010 11:09:31
Ya lo he resuelto, tal vez sea una forma un poco, "guarra" y poco elegante de hacerla, pero por ahora funciona, pongo el codigo para quien pueda servirle.

es script es igual, pero a la hora de poner esto:

document.getElementById('foto').filters.blendTrans.apply()
document.getElementById('foto').src=imagenes[cont].src
document.getElementById('foto').filters.blendTrans.play()

lo pongo tantas veces como fotos tenga, y cambiamos foto por foto1, foto2, foto3, ....

a la hora de meter las imagenes en el codigo html, cada una de ellas la llamamos con foto1, foto2, foto3.... etc etc etc... de esa forma van cambiando las imagenes...

un saludo
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

cambio de imagenes cada cierto tiempo

Publicado por paty (1 intervención) el 23/04/2013 17:59:37
Se que ya lo respondiste, pero como comentario y que quede de kb (ya que a mi me sacaste de una)
para hacer lo sin tener que repetir por cada imagen estas lineas:


es simplemente sustituir donde dice foto por el nombre del array que se creo arriba, en este caso, imagenes :) quedando asi
document.getElementById('imagenes').filters.blendTrans.apply()
document.getElementById('imagenes').src=imagenes[cont].src
document.getElementById('imagenes').filters.blendTrans.play()
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