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

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

También te puede interesar

3 Comments

  1. Carlos
    oct 08, 2010 @ 18:42:11

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

  2. carlitos
    ene 06, 2011 @ 00:35:33

    Hola, sabeis si este slideshow va a correrme bn desde un smartphone como el iphone o android??

  3. carlitos
    ene 06, 2011 @ 15:20:37

    existe alguna funcion similar que pueda funcionar en equipos moviles??