Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Imágenes que cambien cada segundo

JavaScript - Imágenes que cambien cada segundo

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Imágenes que cambien cada segundo

Publicado por programa (4 intervenciones) el 12/04/2015 01:39:17
Hola a tod@s,

Estoy intentando programar una aplicación que muestre una imagen cada segundo y he llegado a algo así:

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
<html>
<head>
<title>Imagenes que cambian cada cierto tiempo</title>
<script language="JavaScript">
var i=1;
setTimeout("cambio()",1000);
function cambio() {
   if(i==1) {
      document.write("<img src='imagen1.png'>");
      i=i+1;
   }
   else if (i==2) {
      document.write("<img src='imagen2.png'>");
      i=i+1;
   }
   else if (i==3) {
      document.write("<img src='imagen3.png'>");
      i=1;
   }
   setTimeout("cambio()",1000);
}
</script>
</head>
<body onload="cambio()">
</body>
</html>

Sin embargo, sólo me muestra la primera imagen y no va mostrando las otras dos cada segundo que pasa.
¿Alguien sabe cuál puede ser el error y cómo solucionarlo? Quiero hacerlo así porque pretendo utilizar esta estructura para mostrar otro tipo de elementos (que vaya apareciendo cada segundo la temperatura de las principales ciudades de España).

Muchas gracias por vuestra ayuda ;)
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

Imágenes que cambien cada segundo

Publicado por Jeyson (2 intervenciones) el 12/04/2015 04:17:06
Depronto te podria ayudar algo como esto

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
<html>
<head>
<title>Imagenes que cambian cada cierto tiempo</title>
<style>
	img{
		width: 200px;
		display:none;
	}
</style>
<script language="JavaScript">
	var i = 1;
function cambio() {
   if(i==1) {
      document.getElementById("ima_1").style.display = "block";
      document.getElementById("ima_2").style.display = "none";
      document.getElementById("ima_3").style.display = "none";
      i=i+1;
   }
   else if (i==2) {
      document.getElementById("ima_2").style.display = "block";
      document.getElementById("ima_1").style.display = "none";
      document.getElementById("ima_3").style.display = "none";
      i=i+1;
   }
   else if (i==3) {
      document.getElementById("ima_3").style.display = "block";
      document.getElementById("ima_1").style.display = "none";
      document.getElementById("ima_2").style.display = "none";
      i=1;
   }
}
</script>
</head>
<body onLoad="setInterval('cambio()',1000);">
	<img id="ima_1" src='imagen1.png'>
	<img id="ima_2" src='imagen2.png'>
	<img id="ima_3" src='imagen3.png'>
</body>
</html>
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
sin imagen de perfil

Imágenes que cambien cada segundo

Publicado por programa (4 intervenciones) el 12/04/2015 20:16:07
Muchas gracias por tu respuesta ;)

Te comento, voy a 'simplificar' un poco la parte de código que me está dando la lata para facilitar el problema.

Yo tengo esto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<script language="JavaScript">
var variable=1;
function cambio() {
   document.write(variable);
   variable=variable+1;
   var t = setInterval(cambio,1000);
}
</script>
</head>
<body onload="cambio()">
</body>
</html>

Básicamente, lo que quiero (el esqueleto de mi duda, no lo voy a ampliar más) es que me muestre una especie de contador y que cada número cambie por el siguiente cada segundo: que primero aparezca el 1, al segundo siguente el 2, después el 3,...
De esta forma, sólo me escribe el 1 y hace la asignación del 2 a la variable pero no hace el setInterval para que se repita el proceso cada segundo. Además, si saco el setInterval de la función, ya no me lo coge tampoco.

Quiero hacerlo así (siempre que se pueda, claro) porque lo tengo orientado para poder hacer una aplicación aún mayor (olvidémonos de las imágenes y de comandos relacionados con minutos, segundos, etc.).

Perdona las molestias y muchas gracias de nuevo por tu colaboración ;)
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
Imágen de perfil de Vainas
Val: 95
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Imágenes que cambien cada segundo

Publicado por Vainas (258 intervenciones) el 12/04/2015 21:44:39
Hola buenas:

Prueba con esto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
</head>
<body>
<script>
var variable=0;
function cambio() {
var imp = (variable % 3) + 1;
   //document.body.innerHTML = "";

   document.write(imp);
   variable++;
}
var t = setInterval('cambio',1000);
</script>
</body>
</html>

document.write reescribe pero ya conociendo el codigo algo puedes inventar para borrar e imprimir.

Espero que sirva. Saludos.

Update: He puesto una linea que limpia la pantalla, aunque tengo mis dudas no sea que borre tambien el script.
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