Creando un simple Slideshow con Mootools

David Walsh nos trae este excelente tutorial para agregar un Slideshow de manera muy sencilla a nuestro Website con el Framework Javascript Mootools.

Dentro de los miles de plugins que existen para crear Slideshow con Mootools diré que esta puede ser una excelente alternativa si no se necesitan controles de navegación, ya que solo se podrá configurar la duración de cada imagen.

Paso 1: Creando el HTML

<div id="slideshow-container">
	<img src="slideshow/cricci1.jpg" alt="Christina Ricci" />
	<img src="slideshow/cricci2.jpg" alt="Christina Ricci" />
	<img src="slideshow/cricci3.jpg" alt="Christina Ricci" />
	<img src="slideshow/cricci4.jpg" alt="Christina Ricci" />
	<img src="slideshow/cricci5.jpg" alt="Christina Ricci" />
</div>

Paso 2: El CSS

Esto lo colocamos dentro del <head> del html.

#slideshow-container	{ width:512px; height:384px; position:relative; }
#slideshow-container img { display:block; position:absolute; top:0; left:0; z-index:1; }

Paso 3: El Javascript

Este script lo incluiremos justo antes de cerrar el </body>

window.addEvent('domready',function() {
	/* settings */
	var showDuration = 3000;
	var container = $('slideshow-container');
	var images = container.getElements('img');
	var currentIndex = 0;
	var interval;
	/* opacity and fade */
	images.each(function(img,i){
		if(i > 0) {
			img.set('opacity',0);
		}
	});
	/* worker */
	var show = function() {
		images[currentIndex].fade('out');
		images[currentIndex = currentIndex < images.length - 1 ? currentIndex+1 : 0].fade('in');
	};
	/* start once the page is finished loading */
	window.addEvent('load',function(){
		interval = show.periodical(showDuration);
	});
});

Previamente debemos descargar la última versión del Framework Javascript Mootools y la incluiremos en el <head>.

Ver Demo