Carrusel de imagenes

Hoy quiero mostrar un poco de lo que se puede hacer con mootools, se trata de un carrusel de imágenes, muy sencillo, puedes ver el ejemplo para que me entiendas mejor.

Ahora voy a explicar como es que lo he hecho, veras que es algo muy sencillo. Primero es necesario descargar la última versión de mootools, luego lo importas a tu documento.

UPDATE:
He escrito un tutorial sobre como hacer esto mismo con mootools1.2, ademas explico como escribir una clase correctamente utilizando todo el potencial de mootools, te recomiendo ir a leer el nuevo tutorial.

Para importarlo al documento unicamente es necesario hacer esto:

Acontinuación muestro el XHTML necesario para el carrusel.
Como puedes ver, hay una capa contenedora de dos capas, las capas de adentro son para almacenar temporalmente las imágenes e irlas rotando, estoy utilizando dos, porque cuando se realiza la transición la imagen actual se desvanece, y la imagen siguiente aparece, ambos efectos al mismo tiempo. Lo siguiente es acomodar estas capas una encima de la otra y darle el tamaño de las imágenes, esto lo hago con CSS. #contenedor{ position:relative; width:100%; } #img1{ width:420px; height:294px; background-image:url('galeria/intro/01.jpg'); } #img2{ position:absolute; top:0px; left:0px; width:420px; height:294px; } Con esto únicamente estoy modificando las posiciones y asignando las imágenes iniciales, si te fijas la capa contenedora la posicione relativa, esto lo hice para hacer la capa IMG2 absoluta, de esta manera puedo mover la capa img2 a las coordenadas especificas, ósea, ponerla sobre la capa img1. Otro punto importante a destacar aqui, es que si el usuario no tiene habilitado JavaScript, aparecerá simplemente la imagen uno, no habrá efecto, pero podrá ver una imagen. Lo siguiente es hacer un objeto que le llamaré Animación, este objeto le voy a pasar dos parámetros en el constructor, uno es la url donde están alojadas la imágenes a mostrar, y el otro es el numero máximo de imágenes a desplegar, el directorio de imágenes, debe de contener las imágenes nombradas numéricamente en orden ascendente, es decir deben llamarse 01.jpg, 02.jpg,03.jpg, etc. Hasta este punto el código debe estar asi: function Animacion(base,max){ this.base = base; this.cont = 1; this.img1 = true; this.maximo = max; } Las propiedades del objeto son base, que es el directorio donde se alojan las imágenes, cont, es un contador secuencial, se incrementará a uno por cada ejecución de la transición, img1 es una variable booleana que indica únicamente si el div img1 es el que sale o no, maximo es la variable que contiene el maximo numero de imágenes, al llegar con a este numero, se reinicia. Ahora sigue hacer una función a la cual llamaré inicia, la cual va a levantar un temporizador que se ejecutará cada tres segundos. this.inicia = function(){ (function(){ //se incrementa el contador this.cont++; //al llegar al maximo la animacion se inicia if(this.cont > this.maximo) this.cont = 1; var im = 'img1'; var prefix = this.cont+'.jpg'; if(this.cont<10) prefix = '0'+this.cont+'.jpg'; if(this.img1){ this.img1 = false; im = 'img2'; }else this.img1 = true; //se asigna la nueva imagen a la capa que no se esta viendo $(im).style.backgroundImage = 'url('+this.base+'/'+prefix+')'; //se desaparece la capa con la nueva imagen new Fx.Style(im, 'opacity').set(0); //esta funcion espera un segundo antes de ahcer la transición (function(){ //crea el efecto para las dos capas var x = new Fx.Style('img1', 'opacity'); var y = new Fx.Style('img2', 'opacity'); //aparece y desaparece las capas if(this.img1){ x.start(0,1); y.start(1,0); }else{ x.start(1,0); y.start(0,1); } } ).delay(1000,this); } //Este es el temporizador, se ejecutará cada tres segundos ).periodical(3000,this); } He comentado las partes mas importantes del código, espero esté claro, y si existe alguna duda o comentario puedes dejarlo con toda confianza. El código completo es el siguiente: Carrusel by Crisfel



Hasta la próxima!

comments powered by Disqus