animar secuencia de imagenes

payo22 · #1 (**permalink**) 14/06/2006, 15:54

Hola maestros:

quisiera saber como puedo hacer una animacion en base a una secuencia de imagenes pero tambien que me permita controlar dicha animacion, es decir, poner un boton de parar la animacion o reanudarla, o si bien la pare la animacion poner un boton de siguiente y anterior para que asi me muestre que imagen seguia en la animacion algo parecido a la siguiente liga:

http://www.nhc.noaa.gov/archive/2005...graphics.shtml

gracias por su apoyo

payo22 · #2 (**permalink**) 15/06/2006, 09:27

alguien sabe como hacer esto?

payo22 · #3 (**permalink**) 15/06/2006, 10:18

creo qu seria bueno saber como poder mostrar esas imgenes sin animarlas, es decir ,ir mostrando las imagenes de una en una poniendo solo 2 botones de anterior y siguiente

o que opinan ?

payo22 · #4 (**permalink**) 15/06/2006, 11:27

bueno pues ya he investigado un poco y tengo el siguiente codigo

Código PHP:

  <html>
<head>
<title>Mapas</title>
<script language="JavaScript">
var lista = new Array('mapaA1201.gif','mapaA2401.gif','mapaA3301.gif','mapaA4801.gif','mapaA7201.gif');
var contador = 0;
var tiempo = 0;
var tempor = null;
function cambio(sen)
{
contador+= sen;
if (contador ==lista.length)
     contador = lista.length-1;
else
    if (contador < 0) contador = 0;
        document.images.centro.src = lista[contador]
window.status="Imagen numero "+contador
}
function reset()
{
contador = 0;
fin = false;
document.images.centro.src = lista[0]
}
function automat(seg)
{
tiempo = parseInt(seg);
reset();
window.status="Pase automatico";
if (isNaN(tiempo) || tiempo <= 0)
    alert("Error en el tiempo")
else
    tempor = setTimeout("pasar()", tiempo)
}
function parar()
{
clearTimeout(tempor);
}
function pasar()
{
cambio(1);
if (contador < lista.length-1)
    tempor = setTimeout("pasar()", tiempo)
}
</script>
                                                                                                                           
<body color ="#FFFFFF">
<table width="82%" border="0" align="center">
<tr>
<td width="50%" align="right" height="600"><font color="#0033CC">
<b><a href="javascript:cambio(-1)">atras</a></b></font></td>
<td align="center" width="48%" height="600"><img id="centro" src="mapaA1201.gif" width="800" height="600"></td>
<td width="22%" height="247"><font color="#0033CC">
<b><a href="javascript:cambio(1)">avance</a></b></font></td></tr>
<tr>
<td width="30%" align="right"><font color="#0033CC"></font></td>
<td width="48%" align="center"><b><font color="#0033CC">Automatico</font></b>
  <form name="form1"  method="post" action="javascritp:automat(this.form1.tiempo.value)">
     <input type="text" name="tiempo"><br>
     <input type="submit" name="Button" value="Inicio" onclick="pasar()">
     <input type="button" name="Button2" value="Parar" onclick="parar()">
  </form>
</td>
<td width="22%"><font color="#0033CC"></font></td>
</tr>
</table>
                                                                                                                           
</body>
</html>

y lo que me permite es avanzar o retroceder mis imagenes dentro ponen un input text en el que podemos asignarle un tiempo para que empiece la animacion pero al iniciarle me manda un mensaje de error:

javascript is not registered protocol

y bueno preguntarle ya sobre esto que tengo como puedo darle la forma que pretendo?

Cita:

Iniciado por payo22

quisiera saber como puedo hacer una animacion en base a una secuencia de imagenes pero tambien que me permita controlar dicha animacion, es decir, poner un boton de parar la animacion o reanudarla, o si bien la pare la animacion poner un boton de siguiente y anterior para que asi me muestre que imagen seguia en la animacion algo parecido a la siguiente liga:

http://www.nhc.noaa.gov/archive/2005...graphics.shtml

caricatos · #5 (**permalink**) 15/06/2006, 11:46

Hola:

Fíjate en este mensaje: diapositivas y transiciones

Saludos

payo22 · #6 (**permalink**) 15/06/2006, 11:59

esta muy bien caricatos pero existe una forma de obtener la imagen actual bueno te platico mi idea:

mi idea es utilizar la reproduccion automatica y poder detenerla pero como obtener el indice de la imagen en la cual pare ?

para que asi pueda avanzar adelante o atras?

si me explico?

payo22 · #7 (**permalink**) 15/06/2006, 12:34

ya encontre el error en la linea

<form name="form1" method="post" action="javascritp:automat(this.form1.tiempo.value )">
<input type="text" name="tiempo"><br>

esta mal escrito javascript

ahora solo hace la animacion en un solo sentido, es decir ,no esta dentro de un ciclo como la puedo ciclar

payo22 · #8 (**permalink**) 21/06/2006, 10:14

existe alguna forma de eliminar mi caja de texto para que el valor que le asiganaba al tiempo lo asigne directamente dentro del codigo y hacer que se reproduzca automaticamente mis imagenes?

payo22 · #9 (**permalink**) 21/06/2006, 11:36

ya logre que inicie automaticamente pero hay algo mal en mi funcion que no me permite detenerlo?

aqui pongo mi codigo:

Código PHP:

  <html> 
<head> 
<title>Mapa Morelos</title> 
<script language="JavaScript"> 
<!-- Mas en: http://javascript.espaciolatino.com/ --> 
var lista = new Array('mapaA1201.gif','mapaA2401.gif','mapaA3301.gif','mapaA4801.gif','mapaA7201.gif'); 
var contador = 0; 
var tiempo = 0; 
var tempor = null; 
var i = 0; 
function boucle_images() 
{ 
        var intervalle=1000 
        var nombre_total_images = 5; 
        document.images.centro.src = lista[i] 
        i++; 
        i%=nombre_total_images; 
        setTimeout("boucle_images()",intervalle); 
} 
function cambio(sen){ 
contador+= sen; 
if (contador ==lista.length) 
     contador = lista.length-1; 
else 
    if (contador < 0) contador = 0; 
        document.images.centro.src = lista[contador] 
window.status="Imagen numero "+contador 
} 
function reset() 
{ 
contador = 0; 
fin = false; 
document.images.centro.src = lista[0] 
} 
 
 
function automat(seg) 
{ 
tiempo = parseInt(seg); 
reset(); 
window.status="Pase automatico"; 
if (isNaN(tiempo) || tiempo <= 0) 
    alert("Error en el tiempo") 
else 
    tempor = setTimeout("pasar()", tiempo) 
} 
 
function automat2(seg) 
{ 
tiempo = parseInt(seg); 
reset(); 
window.status="Pase automatico"; 
tempor = setTimeout("boucle_images()", tiempo) 
} 
 
function parar(){ 
clearTimeout(tempor); 
} 
function pasar(){ 
cambio(1); 
if (contador < lista.length-1) 
    tempor = setTimeout("pasar()", tiempo) 
} 
</script> 
 
<body color ="#FFFFFF" onLoad="javascript:automat2(1000)"> 
<table width="82%" border="0" align="center"> 
<tr> 
<td width="50%" align="right" height="600"><font color="#0033CC"> 
<b><a href="javascript:cambio(-1)">atras</a></b></font></td> 
<td align="center" width="48%" height="600"><img id="centro" src="mapaA1201.gif" width="800" height="600"></td> 
<td width="22%" height="247"><font color="#0033CC"> 
<b><a href="javascript:cambio(1)">avance</a></b></font></td></tr> 
<tr> 
<td width="30%" align="right"><font color="#0033CC"></font></td> 
<td width="48%" align="center"><b><font color="#0033CC">Automatico</font></b> 
<form name="form1" method="post" action="javascript:automat(this.form1.tiempo.value)"> 
 
<input type="text" name="tiempo"> 
<br> 
<input type="submit" name="Button" value="Inicio" onclick="pasar()"> 
<input type="button" name="Button2" value="Parar" onclick="parar()"> 
</form> 
</td> 
<td width="22%"><font color="#0033CC"></font></td> 
</tr> 
</table> 
 
</body> 
</html>

espero me puedan ayudar

voy a seguir checando que esta mal

gracias

payo22 · #10 (**permalink**) 21/06/2006, 12:09

ya he logrado detener la animacion solo agregue dentro de la funcion boucle_images al setTimeout se lo asigne a la variable tempor y con eso ya lo detiene, solo que ahora al avanzar a la imagen siguiente se esta perdiendo ya que inicia desde la imagen[0] y no en la que estaba cuando detuve la animacion

Felipe Torres · #11 (**permalink**) 21/06/2006, 13:21

Realmente esta muy bien tu codigo para este ejemplo, ojala que cuando lo termines puedas publicarlo completo para analizarlo.

Animo, esta muy bien tu idea.

Saludos

payo22 · #12 (**permalink**) 22/06/2006, 12:02

bueno pues al fin he avanzado jajaja solo lo que hace falta es que al detener la animacion y al volver a iniciarla cominece en donde se detuvo pero bueno ya funciona aqui dejo el codigo haber si le pueden hechar un vistazo

Código PHP:

  <html> 
<head> 
<title>Mapa Morelos</title> 
<script language="JavaScript"> 
var lista = new Array('mapaA1201.gif','mapaA2401.gif','mapaA3301.gif','mapaA4801.gif','mapaA7201.gif'); 
var tiempo = 1000; 
var tempor = null; 
var pos=0; 
var i = 0; 
 
function boucle_images(){ 
        var nombre_total_images = 5; 
        document.images.centro.src = lista[i] 
        pos=i; 
        i++; 
        i%=nombre_total_images; 
        tempor=setTimeout("boucle_images()",tiempo); 
 
} 
 
function avanza(){ 
 
  if (pos==(lista.length-1)) 
      pos=0; 
  else 
  pos++; 
  document.images.centro.src = lista[pos] 
 
} 
 
function retroceso(){ 
 
  if (pos==0) 
      pos=(lista.length-1); 
  else 
  pos--; 
  document.images.centro.src = lista[pos] 
} 
 
function automat(){ 
tempor = setTimeout("boucle_images()", tiempo) 
} 
 
function parar(){ 
clearTimeout(tempor); 
} 
 
</script> 
</head> 
<body color ="#FFFFFF" onLoad="javascript:automat()"> 
<table width="82%" border="0" align="center"> 
<tr> 
<td width="50%" align="right" height="600"><font color="#0033CC"> 
<b><a href="javascript:retroceso()">atras</a></b></font></td> 
 
<td align="center" width="48%" height="600"><img id="centro" src="mapaA1201.gif" width="800" height="600"></td> 
<td width="22%" height="247"><font color="#0033CC"> 
<b><a href="javascript:avanza()">avance</a></b></font></td></tr> 
<tr> 
<td width="30%" align="right"><font color="#0033CC"></font></td> 
<td width="48%" align="center"> 
<form name="form1" > 
<br> 
<input type="submit" name="Button" value="Inicio" onclick="boucle_images()"> 
<input type="button" name="Button2" value="Parar" onclick="parar()"> 
</form> 
</td> 
</tr> 
</table> 
</body> 
</html> 
 
haber que encuentran :arriba:

kerso4 · #13 (**permalink**) 26/03/2010, 09:11

soi un poko nuevo en esto
la funcion:
onload="javascrip:"automatic()"
va en el body pero lo qero poner dentro de una tabla
e probado como crei pro no funciona:
<table onload="javascript:automat()">
<tbody onload="javascript:automat()">
<td onload="javascript:automat()">
no va de ninguna forma sabrian decirme dond lo tngo q poner
muxas gracias de antemano

caricatos · #14 (**permalink**) 26/03/2010, 09:26

Hola:

Bienvenido a los foros... pero procura que se te entienda mejor.

El tema se cierra por viejo (siempre se puede referenciar.

Saludos