El siguiente código HTML representa una página web que muestra 9 imágenes una detrás de otra mediante transición por desvanecimiento.
Las 9 imágenes estarán situadas en las mismas coordenadas y tendrán el mismo tamaño, por lo tanto la que se encuentra en primer plano estará ocultando las 8 restantes.
Para ello vamos a utilizar HTML5 y el plugin JQuery.
Antes de nada tendremos que bajarnos el plugin de JQuery en la dirección
http://code.jquery.com/. Descargamos el archivo jquery-1.9.1.js y lo guardamos en una carpeta llamada js de nuestro sitio web.
Con la siguiente línea estamos incluyendo el plugin en nuestra página:
<script src="js/jquery-1.9.1.js"></script>
Aquí está el código completo:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ejemplo fundido de imágenes</title>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$("#imagen1").show(3000,cambio1);
// Como la imagen 1 ya está mostrada, esto solo
// tiene efecto de retardo. Cuando pasen 3000
// milisegundos ejecutará la función cambio1.
});
function cambio1() {
$("#imagen1").fadeOut(5000,cambio2);
// Oculta la imagen1 mediante efecto de desvanecimiento
// modo que se irá mostrando la imagen2 que está por debajo.
// El efecto de desvanecimiento dura 5000 milisegundos.
}
function cambio2() {
$("#imagen2").fadeOut(5000,cambio3);
// Oculta la imagen2 mediante efecto de desvanecimiento
// modo que se irá mostrando la imagen3 que está por debajo.
// El efecto de desvanecimiento dura 5000 milisegundos.
}
function cambio3() {
$("#imagen3").fadeOut(5000,cambio4);
}
function cambio4() {
$("#imagen4").fadeOut(5000,cambio5);
}
function cambio5() {
$("#imagen5").fadeOut(5000,cambio6);
}
function cambio6() {
$("#imagen6").fadeOut(5000,cambio7);
}
function cambio7() {
$("#imagen7").fadeOut(5000,cambio8);
}
function cambio8() {
$("#imagen8").fadeOut(5000, cambio9);
}
</script>
<style>
img {
position:absolute;
top:10px;
left:10px;
width:303px;
height:448px;
}
</style>
</head>
<body>
<img id="imagen1" style="z-index:9" src="images/1.jpg">
<img id="imagen2" style="z-index:8" src="images/2.jpg">
<img id="imagen3" style="z-index:7" src="images/3.jpg">
<img id="imagen4" style="z-index:6" src="images/4.jpg">
<img id="imagen5" style="z-index:5" src="images/5.jpg">
<img id="imagen6" style="z-index:4" src="images/6.jpg">
<img id="imagen7" style="z-index:3" src="images/7.jpg">
<img id="imagen8" style="z-index:2" src="images/8.jpg">
<img id="imagen9" style="z-index:1" src="images/9.jpg">
</body>
</html>
Observar que todas las imágenes están en las coordenadas 10, 10 según está configurado mediante css.
La imagen con mayor z-index será la que se mostrará en primer lugar, en este caso, la imagen con nombre 1.jpg que tiene identificador imagen1.
Al ocultarse por desvanecimiento la imagen1 mediante la siguiente sentencia:
$("#imagen1").fadeOut(5000,cambio2);
va mostrándose al mismo tiempo la imagen2.
Suerte
No hay comentarios:
Publicar un comentario