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