Foros del Web » Programando para Internet » Javascript »

Pasar imagenes con pausa entre ellas

Estas en el tema de Pasar imagenes con pausa entre ellas en el foro de Javascript en Foros del Web. Buenas necesito ayuda son el sigueinte script: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sin ...
  #1 (permalink)  
Antiguo 06/04/2012, 02:12
 
Fecha de Ingreso: julio-2009
Mensajes: 6
Antigüedad: 15 años, 4 meses
Puntos: 0
Pasar imagenes con pausa entre ellas

Buenas necesito ayuda son el sigueinte script:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin tÃ*tulo</title>
<script language="javascript">
var t;
var index=0;
function ver_imagen()
{
src= imagenes[index];
document.write("<img src="+src+" width=300 height=250 >");
t=setTimeout("pasar_imagen()",5000);
}
function pasar_imagen()
{
clearTimeout(t);
index++;
if (index==x)
{
index=0;
}

ver_imagen();
}

</script>
<STYLE type="text/css">
#foto{
position:absolute;
top:100px;
left:425px;
}
</style>
</head>
<body>

<?php
$imagenes=array("imagenes/Desert.jpg","imagenes/Penguins.jpg","imagenes/koala.jpg");
$x=count($imagenes);
?>
<script>
var imagenes = new Array();
<?php
for ($i = 0; $i < $x; $i ++)
echo "\nimagenes[$i] = '$imagenes[$i]';";
echo "\nx = '$x';";
echo "\nz = '0';";
?>
ver_imagen()
</script>

</body>
</html>

El problema es que deberia ir pasado una imagen detras de otra con una pausa, pero al llegar a la segunda la muesta y se mete en un bucle sin salida. Por favor decirme que estoy haciendo mal.

Un saludo y Gracias.
  #2 (permalink)  
Antiguo 06/04/2012, 09:44
Avatar de Martriay  
Fecha de Ingreso: noviembre-2010
Mensajes: 80
Antigüedad: 14 años
Puntos: 5
Respuesta: Pasar imagenes con pausa entre ellas

Cómo queda el código javascript una vez ejecutado el PHP?
  #3 (permalink)  
Antiguo 07/04/2012, 00:28
 
Fecha de Ingreso: julio-2009
Mensajes: 6
Antigüedad: 15 años, 4 meses
Puntos: 0
Respuesta: Pasar imagenes con pausa entre ellas

El proceso se mete en un bucle despues de mostrar la segunda imagen y de ahi no sale, y lo que quiero que haga es que muestre la tercera y luego que vuelva a la pimera.

os dejo el enlace

http://www.rsg69.net46.net/show/Untitled-12.php

Un saludo y gracia
  #4 (permalink)  
Antiguo 07/04/2012, 02:15
 
Fecha de Ingreso: julio-2009
Ubicación: La Plata
Mensajes: 233
Antigüedad: 15 años, 4 meses
Puntos: 8
Respuesta: Pasar imagenes con pausa entre ellas

Fijate si te sirve lo que hay acá:
http://www.forosdelweb.com/f13/cambi...gundos-983506/

Al final de todo hay algo muy parecido a lo que querés. Avisame si te sirvió.

PD: Si te sirvió y tenés ganas le agrego un efecto de transparencia suave al cambiar de imagen.Salu2!!
  #5 (permalink)  
Antiguo 08/04/2012, 12:07
 
Fecha de Ingreso: julio-2009
Mensajes: 6
Antigüedad: 15 años, 4 meses
Puntos: 0
Respuesta: Pasar imagenes con pausa entre ellas

Gracias pistonasos, si esto es lo que queria, pero como soy bastante novaro en Javascript no se como modificar la linea donde se cambia el fondo (esta)

this.ele.style.background='url("'+this.conf.fondos[this.cont]+'")'

para que lo muestre como una imagen unas dimesiones deseadas, he probado muchas formas y no encuentro la solucion.

Haber si me podeis ayudar.

Gracias
  #6 (permalink)  
Antiguo 08/04/2012, 18:14
 
Fecha de Ingreso: julio-2009
Ubicación: La Plata
Mensajes: 233
Antigüedad: 15 años, 4 meses
Puntos: 8
Respuesta: Pasar imagenes con pausa entre ellas

Hola, en tu caso, en vez de asignarle un fondo a un elemento, tendrías que agregarle un imagen a un elemento.Eso se puede hacer de dos maneras:
Mediante DOM (Un poco más flexible y limpia)
Mediante innerHTML
Por ej:
Código Javascript:
Ver original
  1. //Mediante DOM
  2. nImg=document.createElement("img")
  3. nImg.src="srcDeLaImagen.png"
  4. document.getElementById("miDiv").appendChild(nImg)
  5. //Mediante innerHTML
  6. document.getElementById("miDiv").innerHTML="<img width='400px' height='200px' src='srcDeLaImagen.png' />"
Buscá en google sobre ambos.
Por el script, lo modifiqué y probé en Opera:
Código Javascript:
Ver original
  1. fondoDin=function(ele,fondos)
  2. {
  3.     this.key="fondoDin"+new Date().getTime()+new Date().getMilliseconds()
  4.     if(typeof(obj)=="undefined")
  5.         {
  6.             obj=new Array()
  7.         }
  8.     obj[this.key]=this
  9.     this.cont=0
  10.     this.ele=ele
  11.     this.conf=new Array()
  12.     this.conf.extra=""
  13.     this.conf.fondos=fondos
  14.     this.conf.retardo=10000
  15.     this.conf.bucle=1
  16.     this.nImg=""
  17.     this.detona=function()
  18.     {
  19.         if(this.nImg)
  20.         {
  21.             this.ele.removeChild(this.nImg)
  22.         }
  23.         this.nImg=document.createElement("img")
  24.         this.nImg.src=this.conf.fondos[this.cont]
  25.         this.ele.appendChild(this.nImg)
  26.         if(this.cont==this.conf.fondos.length-1)
  27.             {
  28.                 if(this.conf.bucle)
  29.                     {
  30.                         this.cont=0
  31.                     }
  32.                 else
  33.                     {
  34.                         eval(this.conf.extra)
  35.                         return 0
  36.                     }
  37.             }
  38.         else
  39.             {
  40.                 this.cont++
  41.             }
  42.         this.timer=setTimeout("obj['"+this.key+"'].detona()",this.conf.retardo)
  43.     }
  44.     this.aborta=function()
  45.     {
  46.         if(typeof(this.timer)!="undefined")
  47.             {
  48.                 clearTimeout(this.timer)
  49.             }
  50.     }
  51. }
Código HTML:
Ver original
  1.     <head>
  2.         <title></title>
  3.         <link rel="stylesheet" type="text/css" href="./index.css" />
  4.         <script type="text/javascript" src="./index.js"></script>
  5.     </head>
  6.     <body>
  7.         <table>
  8.             <tbody>
  9.                 <tr><td name="destino"></td></tr>
  10.             </tbody>
  11.         </table>
  12.         <script type="text/javascript">
  13.             imgArr=["http://www.puntogeek.com/wp-content/uploads/2010/06/DebianDark.jpg","http://ejercitogeek.net/wp-content/uploads/2011/02/debian-6-cd.jpg","http://www.puntogeek.com/wp-content/uploads/2008/04/codigo-fuente-windows-vista.gif"]
  14.             imgDin=new fondoDin(document.getElementsByName("destino")[0],imgArr)
  15.             imgDin.conf.retardo=5000
  16.             imgDin.detona()
  17.         </script>
  18.     </body>
  19. </html>

Probalo y contame cómo te fué.
  #7 (permalink)  
Antiguo 09/04/2012, 00:53
 
Fecha de Ingreso: julio-2009
Mensajes: 6
Antigüedad: 15 años, 4 meses
Puntos: 0
Respuesta: Pasar imagenes con pausa entre ellas

Gracias pistonasos, cuando llegue a casa, depues de trabajar, lo probrare y te contare

Un saludo.
  #8 (permalink)  
Antiguo 09/04/2012, 08:43
 
Fecha de Ingreso: julio-2009
Mensajes: 6
Antigüedad: 15 años, 4 meses
Puntos: 0
Respuesta: Pasar imagenes con pausa entre ellas

Si que me funciona pistonasos, ahora a buscar como hacerlo mas bonita la presentacion con algun efecto.
  #9 (permalink)  
Antiguo 09/04/2012, 13:17
 
Fecha de Ingreso: julio-2009
Ubicación: La Plata
Mensajes: 233
Antigüedad: 15 años, 4 meses
Puntos: 8
Respuesta: Pasar imagenes con pausa entre ellas

Si querés le agrego transparencia en el cambio de imágenes. Igual me vas a tener que esperar...Mañana capaz que me toman examen de literatura y tengo que leer un libro (que apenas lo comenzé),ja.Salu2
  #10 (permalink)  
Antiguo 10/04/2012, 00:28
 
Fecha de Ingreso: julio-2009
Mensajes: 6
Antigüedad: 15 años, 4 meses
Puntos: 0
Respuesta: Pasar imagenes con pausa entre ellas

Me harias un gran favor, pero sin prisa, yo ya he empezado a buscar en google pero sin hacer ningun script, solo tomar informacion por falta de tiempo.

Un sludo y gracias pistonasos

Etiquetas: html, imagenes, pausa, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:07.