Pase de diapositivas DHTML

  • Por
Efecto DHTML de pase de diapositivas en el que se van mostrando una serie de imágenes con un efecto cortina.
En este taller de DHTML vamos a crear un pase de diapositivas, en el que se mostrarán varias imágenes en un mismo espacio, que se irán visualizando con un efecto cortina. Todo ello con Javascript y CSS compatible con todos los navegadores.

Es decir, vamos a tener varias imágenes en varias capas, colocadas en el mismo espacio de la página, que se mostrarán una detrás de otra. El efecto cortina trata simplemente de mostrar la imagen línea a línea, en lugar de que aparezca de golpe.

Lo mejor para saber exactamente lo que deseamos hacer es ver el ejemplo en marcha.

Nota: Este ejercicio es continuación de otro en el que se explica cómo hacer un efecto cortina con DHTML. En el anterior ejercicio nos limitábamos a realizar el efecto cortina sobre una capa. En esta ocasión tenemos varias capas y el efecto cortina se aplica sobre ellas, una detrás de otra, para realizar el pase de varias imágenes con el efecto cortina. También hay que señalar que este artículo hace uso de las librerías X-Library, que fueron comentadas anteriormente en DesarrolloWeb.com.

El HTML y CSS

Veamos primero cómo crear el HTML, junto con CSS, que nos va a servir para disponer de varias capas en la misma posición.

Primero definimos un CSS que indica la posición y otras características de las capas que van a contener las imágenes.

<style type="text/css">
.estilocapa {position:absolute; left:50px; top:80px; visibility:visible; clip: rect(0,155,0,0);}
</style>


Cabe destacar que en este caso todas las capas están visibles, aunque se les ha aplicado un cliping (recorte) por el que no se muestra ninguna parte de la capa. Luego utilizaremos este atributo de CSS (clip) para variar ese recorte de la imagen, de modo que se muestre línea a línea.

Ahora veremos las capas que van a participar en nuestro pase de diapositivas. En cada una de las capas introducimos una de las imágenes que vamos a utilizar.

<div id="c1" class=estilocapa>
<img src="images/ancares.jpg" width="155" height="80" border="0">
</div>
<div id="c2" class=estilocapa>
<img src="images/aranjp.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c3" class=estilocapa>
<img src="images/aranjuez.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c4" class=estilocapa>
<img src="images/austral.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c5" class=estilocapa>
<img src="images/basel.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c6" class=estilocapa>
<img src="images/bombay.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c7" class=estilocapa>
<img src="images/brujas.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c8" class=estilocapa>
<img src="images/bruselas.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c9" class=estilocapa>
<img src="images/burgos2.jpg" width="155" height="80" alt="" border="0">
</div>


En total tenemos 9 capas, que hemos llamado con los nombres c1, c2... c9.

Javascript para realizar el pase de diapositivas

Lo primero será incluir las librerías X-Library en la página, para tener acceso a las funciones DHTML que vamos a utilizar en el ejercicio.

<script type='text/javascript' src='../x/x_core.js'></script>

Ahora veamos el código necesario para realizar la animación, por partes, para tratar de explicarlo de una manera sencilla. Recordar que este ejemplo viene comentado anteriormente en el artículo Efecto DHTML cortina, para mostrar una capa poco a poco.

Primero definimos una serie de variables globales que vamos a utilizar a lo largo de la ejecución del script.

velocidad = 5
clip_top = 0
clip_right = 155
clip_bottom = 0
clip_left = 0
maximo_clip_bottom = 80
contador_zindex = 0


La variable velocidad controla la rapidez del script. A más velocidad, más lento se realiza el efecto. Esta variable la utilizaremos en la sentencia setTimeout() para indicar los milisegundos que deben transcurrir entre cada ejecución del bucle que realiza la animación.

Las variables clip_top, clip_right, clip_bottom, clip_left, que guardan el recorte que se debe aplicar a la capa en cada ejecución del bucle. La siguiente variable, llamada maximo_clip_bottom, se utiliza para saber el momento en el que se tiene que detener el recorte de la imagen, porque se haya llegado a mostrar por completo.

Por último, la variable contador_zindex, sirve para mostrar la capa que se tiene que visualizar en cada momento por encima de las otras capas que hay en la página. Z-Index es un atributo de hojas de estilo en cascada que sirve para definir qué capas se muestran en la parte de arriba y cuáles en la de abajo, en caso de que estas capas se encuentren superpuestas en un mismo lugar. Este contador, que se incrementa entre cada ejecución del script, se utiliza para asignar el atributo Z-Index en la capa que hay que mostrar en cada momento. A mayor Z-Index de la capa, se muestra más arriba.

Además, vamos a crear un array de nombres de las capas que participan en este efecto.

capas_images = new Array("c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9")
imagen_actual = 0


Este array lo utilizamos para conocer el identificador de la capa a mostrar en cada momento. La variable imagen_actual sirve para guardar el índice del array que corresponde con la capa a mostrar.

Ahora veremos la función que se utiliza para mostrar las capas, una a una y con el efecto cortina. Esta función se llamará a si misma con un retardo, para crear el bucle de animación.

function cortina(){
    clip_bottom += 1
    if (clip_bottom==maximo_clip_bottom){
       clip_bottom = 0
       imagen_actual += 1
       if (imagen_actual == capas_images.length){
          imagen_actual=0
       }
       xZIndex(capas_images[imagen_actual],contador_zindex)
       contador_zindex ++
    }
    xClip (capas_images[imagen_actual], clip_top, clip_right, clip_bottom, clip_left)
    setTimeout("cortina()",velocidad)
}


La función empieza por aumentar el valor de clip_bottom, para mostrar un poco más de la imagen en el recorte que va a hacer posible el efecto cortina.

A continuación se comprueba si se ha llegado al máximo calor de recorte, en cuyo caso se supone que la imagen se ha mostrado por completo y habría que pasar a la siguiente imagen. En ese caso, restauramos el valor clip_botom y asignando un cero y aumentamos en uno la imagen actual, para pasar a la siguiente capa del array de capas. En caso de que se haya llegado al final del array de capas, se vuelve a la primera imagen.

Posteriormente, todavía dentro del if que controla si se ha mostrado por completo una imagen, se actualiza el atributo Z-Index de la capa actual, para que se muestre en la parte del frente y se aumenta el contador de Z-Index para que la próxima capa se muestre delante de la actual.

En cada ejecución de la función se actualiza el valor de clip de la capa actual, asignando los valores almacenados en las variables globales que vimos anteriormente.

Por último, se llama otra vez a la función cortina para producir el bucle. La llamada se realiza con un retardo, que viene definido por la variable global velocidad.

Para que la animación se ponga en marcha nada más terminar la carga de la página, debemos asociar el evento ONLOAD a la función cortina(), con la siguiente línea de Javascript.

window.onload = cortina

Se puede ver el resultado final en este enlace.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Jose Manuel Domenech

24/4/2005
He probado este ejemplo, que me gusto para aplicarlo a la página del Instituto de Enseñanza donde trabajo, lo he utilizado con 16 fotos, pero tengo un problema el Internert Explore, no me sale las imagenes y me da error de depuración en la línea window.onload = cortina

El JavaScrip lo tengo en fichero aparte en el encabezamiento de la página tengo lo siguiente:

<script language="JavaScript" src="Javascrip/x_core.js" type="text/javascript" ></script>
<script language="JavaScript" src="Javascrip/diapositiva.js" type="text/javascript" ></script>

Me podeis indicar donde me estoy equivocando. Gracias de atemano.

Un cordial saludo
José Manuel Domenech
Gran Canaria

RESPUESTA

El código

window.onload = cortina

sirve para asignar la función cortina() al evento que se ejecuta cuando se termina de cargar la página.

Si no te funciona, asegúrate de que la función cortina está disponible, es decir, si la encuentra Javascript.

Si te fijas donde has incluido los archivos donde debería estar declarada la función cortina, tienes esto:

src="Javascrip/diapositiva.js"

Eso quiere decir que tienes un archivo llamado "diapositiva.js" en el directorio "Javascrip". Fíjate que el directorio tiene la "J" de Javascrip en mayúscula y que no le has puesto la "t" al final (pues la palabra javascript acaba en "t").

Si se accede correctamente al fichero, fíjate también que dentro de éste tengas correctamente definida la función "cortina".

Si todo está bien y sigue dando problemas, intenta incluir la llamada al manejador de eventos onload en la propia etiqueta <body>. Algo como esto:

<body onload="cortina()">

marlon

05/3/2009
aparte del tamaño de las imagenes que ams debo cambiar para hacer una galeria con imagenes mas grandes ya que io cambie en <img scr="" > el width y el heigth y solo veo partes de la imagen osea el tamaño de la capa sigue igual al que uds definieron como puedo cambiar este tamaño para mostrar imagenes mas grandes

Sentencia3

15/4/2010
Me encanta pero tengo una duda
Hola amigos, me gusta este script pero, mi duda es esta, siempre que implemento en mis paginas codigo en javascript cuando lo pruebo en el navegador me aparece el mensaje "Internet Explorer impidio que se ejecutaran scripst o controles ActiveX".

Cuando le doy a permitir no hay problema y lo hace bien, sin embargo he visto que en algunas paginas que tambien utilizan javascript no me pide nada y se ejecutan automaticamente, ¿como se hace esto?

Me gustaria que se ejecutara automaticamente sin intervencion del usuario.

Principiante

28/4/2010
Excelente transicion ¿pero tengo una duda?
como le podria hacer para que la trancision pasara de derecha a izquierda o biseversa a lugar de arriba asi abajo.

gracias.

Aishathel

16/5/2010
Cortar y pegar en Dreamweaver
¿Podrías explicar cómo se añade paso a paso en el código fuente?

thydda

23/8/2011
Única repetición del efecto
El script me funciona perfecto pero me gustaría saber cómo o qué habría que hacer para que únicamente se hiciera una vez, es decir, que no hubiera bucle. He intentado añadir estructuras de control como IF or FOR de la siguiente manera pero no me funciona:

clip_top = 0
clip_right = 350
clip_bottom = 0
clip_left = 0
maximo_clip_bottom = 200

times =0

for (times=0;times<1;times++)
{
function cortina(){
clip_bottom += 1
clip_bottom = clip_bottom % maximo_clip_bottom
xClip ("textoDibujos", clip_top, clip_right, clip_bottom, clip_left)

setTimeout("cortina()",25)

}

window.onload = cortina;
}

No sé dónde debo escribir la variable "times" para que no la actualice a 0 en cada lectura o, cómo debo realizar el control para que únicamente me realice el efecto una sola vez al cargar la página.

Espero alguna respuesta

Muchas gracias de antemano

Saludos,
Zaida

Jose

04/11/2011
Tengo problemas con la extencion de la libreria
en el nuevo archivo no me aparece el x_core.js si no uno llamado x.js. la libreria la tengo en un carpeta. la extencion queda de este modo <script type='text/javascript' src='cross-browserxx.js'></script> no se si lo estoy haciendo mal :s o que debo de hacer para que me funcione soy nuevo en esto y me confunde adonde tiene que ir cada parte del codigo. saludos