// Slideshow con transición alfa de un array de imágenes
// Autor: Miguel García Domínguez
// Fecha: 22/11/2009
//
// Necesitas jQuery, un div con id 'imagenes' en tu html y un array 'imagenes' 
// con las rutas de las imágenes (inicializado fuera con php o aquí manualmente)

//var imagenes = ['images/loquesea.jpg','images/otra.jpg'];
var duracion = 3; // tiempo (segundos) que está cada imagen
var imagen_activa = 0; // la primera imagen del array que quieres que se muestre (índices con base 0)

jQuery(document).ready(function() {
	var html = "";
	for (i in imagenes) {
		html += '<div id="imagen'+i+'" style="position:absolute; display:none"><img src="'+imagenes[i]+'" /></div>';		
	}	
	jQuery('#imagenes').html(html);
	if (imagenes.length > imagen_activa) jQuery("#imagen"+imagen_activa).show();
	if (imagenes.length > 1) { 
		setTimeout(cambiar_imagen, duracion*1000);
	}
});

function cambiar_imagen() {
	if (imagenes.length > 1) {
		var siguiente_imagen = (imagen_activa+1)%imagenes.length;
		jQuery("#imagen"+siguiente_imagen).fadeIn("slow");
		jQuery("#imagen"+imagen_activa).fadeOut("slow");
		imagen_activa = siguiente_imagen;
	}
	setTimeout(cambiar_imagen, duracion*1000);
}