Creando un simple Slideshow con Mootools

3
34

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

Christina Ricci Christina Ricci Christina Ricci Christina Ricci Christina Ricci

Paso 2: El CSS

Esto lo colocamos dentro del 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

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 .
Ver Demo

jfdghjhthit45

3 COMMENTS

  1. ¡Excelente! Muy fácil de implementar, usando las imágenes de las medidas exactas queda a la perfección. Gracias por la aportación

Comments are closed.