Crysfel’s Blog
Carrusel de imagenes
Wednesday, May 2, 2007, 10:09:29 am
Featured, JavaScript, Tutoriales
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.
<div id="img1"></div>
<div id="img2"></div>
</div>
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.
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:
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.
(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:
"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1;" />
<title>Carrusel by Crisfel</title>
<script type="text/javascript" src="common/javascript/mootools.v1.00.js"></script>
<style type="text/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;
}
</style>
<script type="text/javascript">
window.addEvent('domready', function(){
var anim = new Animacion('galeria/intro',18);
anim.inicia();
});
function Animacion(base,max){
this.base = base;
this.cont = 1;
this.img1 = true;
this.maximo = max;
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);
}
}
</script>
</head>
<body>
<div id="contenedor">
<div id="img1"></div>
<div id="img2"></div>
</div>
</body>
</html>
Hasta la próxima!
13 Respuestas para este tema
alejandro
Friday, June 8, 2007, 7:25 pm
POrque pones dos div no es necesario solo 1
Crysfel
Tuesday, June 12, 2007, 1:24 pm
Utilizo dos divs, por que hago una transición entre una imagen y otra, pudiese utilizar uno solo, pero no sería el mismo efecto, el efecto actual funciona asi:
La imagen actual se desvanece, mientras la nueva imagen aparece, al mismo tiempo, si utilizara un solo div, entonces, la imagen actual desaparecería y despues aparecería la nueva imagen.
JM
Tuesday, July 10, 2007, 5:53 am
¿Cuales son exactamente los archivos que hay que descargar del sitio web de mootools? Gracias
Crysfel
Tuesday, July 10, 2007, 11:58 am
Muy buen punto! personalmente siempre descargo todo el API, de aprox 35kb, pero si solo quieres descargar las clases que se utilizan para este ejemplo, selecciona la clase Window.DomReady, Fx.Styles y se seleccionaran automaticamente sus dependencias.
No lo he probado, pero me parece ser que estas son las unicas que se utilizan en este ejemplo 
JM
Wednesday, July 11, 2007, 5:32 am
Gracias
También me gustaría saber como conseguir que el efecto de transición entre imágenes ocurra más despacio
Crysfel
Wednesday, July 11, 2007, 4:39 pm
Para eso simplemente agregale mas segundo al temporizador justo en esta linea
//Este es el temporizador, se ejecutará cada tres segundos
).periodical(3000,this);
ese 3000 son tres segundos, ponle 10000 y seran 10 segundos
ceaped
Friday, December 14, 2007, 3:58 pm
Hola.
Hice el ejercicio tal cual pero cuando se difumina la primera imagen, no se vuelven a ver más imagenes, se queda como cargando, te lo digo porque en la parte inferior izquierda del navegador dice cargando.
Que puede hacerme falta.
Gracias por su ayuda
gustavo
Monday, April 7, 2008, 4:20 pm
Yo quiero hacer el efecto de la transicion entre una y otra mas lento, se puede? no cada cuanto se cambia de una a otra, sino el efecto de transicion
gracias
Crysfel
Tuesday, April 8, 2008, 11:51 am
@Gustavo mira, te recomiendo leer este tutorial que escribi http://www.crysfel.com/index.php/2008/02/13/carrusel-de-imagenes-con-mootools12/ esta mejor y mas explicado.
saludos.
ADAN
Tuesday, May 27, 2008, 2:13 pm
UNA PREGUNTA ESTOY PROBANDO EL CODIGO, Y ME ENCONTRE CON QUE NO VISUALIZA NINGUNA IMAGEN, NO SE QUE HICE MAL!
crysfel
Wednesday, May 28, 2008, 9:52 am
@ADAN es posible que no estes importando correctamente la librería de mootools, o quizas no le estes pasando la URL correcta de donde estan alojadas tus imáagenes.
De todas formas, te recomiendo hacerlo de esta manera http://www.crysfel.com/index.php/2008/02/13/carrusel-de-imagenes-con-mootools12/
ADAN
Wednesday, May 28, 2008, 12:20 pm
GRACIAS MUY BUEN APORTE, EXCELENTE! UTILIZE EN EJEMPLO QUE PUSISTE EN EL LINK,GRACIAS, UNA DUDA QUIERO AGREGARLES VINCULOS A LA IMAGENES EN QUE PARTE DEL CODIGO LOS VINCULOS?
ADAN
Monday, June 2, 2008, 2:31 pm
GRACIAS MUY BUEN APORTE, EXCELENTE! UTILIZE EN EJEMPLO QUE PUSISTE EN EL LINK,GRACIAS, UNA DUDA QUIERO AGREGARLES VINCULOS A LA IMAGENES EN QUE PARTE DEL CODIGO AGREGA LOS VINCULOS? E ESTOD INTENTADO PERO NO LO PUEDO ARREGLAR!