Presentación de imagenes javascript
Publicado por Daniel Dominguez Mosquera (2 intervenciones) el 20/12/2005 09:42:11
Hola.
Estoy intentando realizar un efecto de presentación de imagenes con javascript que use transiciones. Es decir, tengo 3 imágenes que quiero que vayan cambiando en la pantalla cada x sg mediante una transicion.
De momento lo que he conseguido es el efecto de cambiar una imagen inicial por otra, pero no se como implementar el bucle que realice este efecto. El código que tengo es el siguiente:
<html>
<head>
<script language="javascript">
var segundos = 5 // Cada cuantos segundos cambia la imagen
var dire = "./" // Directorio o ruta donde están las imágenes
cont=1 // Contador de imagenes
var imagenes=new Array()
imagenes[0]="icono1.jpg"
imagenes[1]="icono2.jpg"
imagenes[2]="icono3.jpg"
if(dire != "" && dire.charAt(dire.length-1) != "/")
{dire = dire + "/"}
var preImagenes = new Array()
for (pre = 0; pre < imagenes.length; pre++) {
preImagenes[pre] = new Image()
preImagenes[pre].src = dire + imagenes[pre]
}
function cambiaImagen(nombreImagen,objetoImagen)
{
if(document.images[nombreImagen].filters != null)
document.images[nombreImagen].filters[0].apply();
if (document.images)
document.images[nombreImagen].src = objetoImagen.src
if(document.images[nombreImagen].filters != null)
document.images[nombreImagen].filters[0].play();
}
function transicion()
{
window.setTimeout('cambiaImagen("foto",preImagenes[cont])',segundos*1000)
cont = cont + 1
//transicion()
}
</script>
<STYLE TYPE="text/css">
.imgTrans {
filter:revealTrans(duration=1, transition=23)
}
</STYLE>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" marginwidth="0" onload="transicion()">
<table width="100%" align="center">
<tr>
<td align="center">
<img src="icono1.jpg" name="foto" class="imgTrans">
</td>
</tr>
</table>
</body>
</html>
La función transicion se ejecuta con el evento onload de la pagina, y me ejecuta el primer cambio de imagen correctamente, pero no consigo implementar el bucle. Mi idea era llamar recursivamente a la función transición (lo veis en la linea comentada), pero esto no me funciona me da error de memoria.
Alguien me puede echar una mano por favor ????
Muchas gracias
Estoy intentando realizar un efecto de presentación de imagenes con javascript que use transiciones. Es decir, tengo 3 imágenes que quiero que vayan cambiando en la pantalla cada x sg mediante una transicion.
De momento lo que he conseguido es el efecto de cambiar una imagen inicial por otra, pero no se como implementar el bucle que realice este efecto. El código que tengo es el siguiente:
<html>
<head>
<script language="javascript">
var segundos = 5 // Cada cuantos segundos cambia la imagen
var dire = "./" // Directorio o ruta donde están las imágenes
cont=1 // Contador de imagenes
var imagenes=new Array()
imagenes[0]="icono1.jpg"
imagenes[1]="icono2.jpg"
imagenes[2]="icono3.jpg"
if(dire != "" && dire.charAt(dire.length-1) != "/")
{dire = dire + "/"}
var preImagenes = new Array()
for (pre = 0; pre < imagenes.length; pre++) {
preImagenes[pre] = new Image()
preImagenes[pre].src = dire + imagenes[pre]
}
function cambiaImagen(nombreImagen,objetoImagen)
{
if(document.images[nombreImagen].filters != null)
document.images[nombreImagen].filters[0].apply();
if (document.images)
document.images[nombreImagen].src = objetoImagen.src
if(document.images[nombreImagen].filters != null)
document.images[nombreImagen].filters[0].play();
}
function transicion()
{
window.setTimeout('cambiaImagen("foto",preImagenes[cont])',segundos*1000)
cont = cont + 1
//transicion()
}
</script>
<STYLE TYPE="text/css">
.imgTrans {
filter:revealTrans(duration=1, transition=23)
}
</STYLE>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" marginwidth="0" onload="transicion()">
<table width="100%" align="center">
<tr>
<td align="center">
<img src="icono1.jpg" name="foto" class="imgTrans">
</td>
</tr>
</table>
</body>
</html>
La función transicion se ejecuta con el evento onload de la pagina, y me ejecuta el primer cambio de imagen correctamente, pero no consigo implementar el bucle. Mi idea era llamar recursivamente a la función transición (lo veis en la linea comentada), pero esto no me funciona me da error de memoria.
Alguien me puede echar una mano por favor ????
Muchas gracias
Valora esta pregunta
0