Aviso: Artículo obsoleto. Ir a Javascript: Carrusel / Slideshow con Jquery.
Actualizado 2009-10-02: Se le añade botón de pausa (vaya fallo el no haberlo puesto anteriormente) y comentarios útiles sobre el funcionamiento de cada parte del código.
He creado un slideshow sencillo con Jquery (probado en versión 1.3.2):
jQuery.noConflict(); // Así podemos convivir con otras librerías JS como Prototype o Motools (y las que utilicen $) sin ningún conflicto
jQuery(document).ready(function(){
var slides1 = new Slides();
slides1.inicia();
/*
// Ejemplo de uso
var slides1 = new Slides();
slides1.inicia();
slides1.caja = '#slides'; // id del contenedor de los destacados
slides1.numero = 1; // Número de destacados que se muestran
slides1.tiempo = 2.5; // Segundos entre cambio de destacado
slides1.velocidadMostrar = 'fast';
*/
});
function Slides () {
this.caja = '#slides'; // id del contenedor de los destacados
this.slide = '.slide'; // destacado
this.numero = 1; // Número de destacados que se muestran
this.tiempo = 2.5; // Segundos entre cambio de destacado
this.milisegundos = this.tiempo*1000; // No editar
this.velocidadMostrar = 'fast';
this.inicia = function () {
numDestacados = jQuery(this.caja+' '+this.slide).length; // Número de destacados
i=this.numero;
k=0;
// Se activa la primera tanda de destacados
while (k<this.numero) {
jQuery(this.caja+' '+this.slide).eq(k).addClass('activo');
k++;
}
while (i<numDestacados) {
jQuery(this.caja+' '+this.slide).eq(i).hide();
i++;
}
// Se da ID a los destacados
j=0;
while (j<numDestacados) {
jQuery(this.caja+' '+this.slide).eq(j).attr('id','slide-'+(j+1));
j++;
}
this.paginacion(); // Se generan los controles de pausa y paginación
// Se inicia el slideshow
var that = this;
this.intervalo = setInterval(function(){that.cambiar();}, this.milisegundos);
// Al clicar una página se detiene el proceso y se va a la página
jQuery('#paginadorSlide li a').click(function () {
clearInterval(that.intervalo);
that.controlPausar();
that.irPagina(parseInt(jQuery(this).parent().attr('id').split('-')[1]));
jQuery('#paginadorSlide li').removeClass('activo');
jQuery(this).parent().addClass('activo');
return false;
});
// Al clicar el botón de pausar/continuar se alterna detener/continuar el proceso
jQuery('#pausarContinuar a').eq(0).click(function () {
if (jQuery(this).hasClass('moviendo')) {
that.controlPausar();
} else {
that.intervalo = setInterval(function(){that.cambiar();}, that.milisegundos);
that.controlContinuar();
}
return false;
});
}
// Modificar botón de pausar/reanudar
this.controlPausar = function () {
clearInterval(this.intervalo);
jQuery('#pausarContinuar a').eq(0).html('Reanudar');
jQuery('#pausarContinuar a').eq(0).removeClass('moviendo');
}
this.controlContinuar = function () {
jQuery('#pausarContinuar a').eq(0).html('Pausar');
jQuery('#pausarContinuar a').eq(0).addClass('moviendo');
}
// Cambiar de slide
this.irPagina = function (pagina) {
elUltimo = pagina*this.numero;
el = (elUltimo)-this.numero;
jQuery(this.caja+' '+this.slide).removeClass('activo');
while (el<elUltimo) {
jQuery(this.caja+' '+this.slide).eq(el).addClass('activo');
jQuery(this.caja+' '+this.slide).eq(el).addClass('activo activoPausa');
el++;
}
jQuery(this.caja+' '+this.slide+':not(.activo)').hide();
jQuery(this.caja+' '+this.slide+'.activo').fadeIn(this.velocidadMostrar);
}
// Cambio automático de slide
this.cambiar = function () {
activos = jQuery(this.caja+' '+this.slide+'.activo').length-1;
ultimoActivo = jQuery(this.caja+' '+this.slide+'.activo').eq(activos);
numeroUltimoActivo = parseInt(jQuery(this.caja+' '+this.slide+'.activo').eq(activos).attr('id').split('-')[1])+this.numero;
proximaPagina = (numeroUltimoActivo/this.numero)-1;
numDestacados = jQuery(this.caja+' '+this.slide).length;
if (numeroUltimoActivo>numDestacados) {proximoActivo=jQuery(this.caja+' '+this.slide).eq(0);proximaPagina=0;} else {proximoActivo = ultimoActivo.next(this.slide);}
jQuery(this.caja+' '+this.slide+'.activo').removeClass('activo');
i=0;
while (i<this.numero) {
proximoActivo.addClass('activo');
proximoActivo = proximoActivo.next();
i++;
}
jQuery(this.caja+' '+this.slide+':not(.activo)').hide();
jQuery('#paginadorSlide li').removeClass('activo');
jQuery('#paginadorSlide li').eq(proximaPagina).addClass('activo');
jQuery(this.caja+' '+this.slide+'.activo').fadeIn(this.velocidadMostrar);
}
this.paginacion = function () {
numPaginas = Math.ceil((jQuery(this.caja+' '+this.slide).length)/this.numero);
jQuery(this.caja).after('<div id="controlesSlide"><ul class="paginadorSlide" id="paginadorSlide"></ul></div>'); // Se crea el contenedor de paginación
jQuery('#paginadorSlide').before('<p id="pausarContinuar"><a href="#" class="moviendo">Pausar</a></p>'); // Se crea el párrafo para el botón de detener/continuar en su estado predeterminado (Pausar)
i=0;j=1;
while (i<numPaginas) {
jQuery('#paginadorSlide').append('<li id="paginaSlide-'+j+'"><a href="#">'+j+'</a></li>');
i++; j++;
}
jQuery('#paginadorSlide li').eq(0).addClass('activo');
}
}
Para iniciarlo con los id y clases predeterminados:
var slides1 = new Slides();
slides1.inicia();
En ese caso el HTML podría ser:
<div id="slides">
<div class="slide">
[Contenido del slide]
</div>
<div class="slide">
[Contenido del slide]
</div>
</div>
Un contenedor que lleve el id slide y elementos dentro del mismo con la clase slides.
Ver demostración o descargar el ejemplo (archivo ZIP, 348KB).