Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Slideshow

Datos de búsqueda

Etiqueta ‘Slideshow’

Javascript: Carrusel / Slideshow con Jquery

Fecha de publicación: 2012/02/24

Hace un par de años publiqué un slideshow con Jquery, que tuvo buena acogida y resultó bastante útil. Hace poco lo he estado rehaciendo, en forma de plugin Jquery. Además el código es más legible y se añade la posibilidad de tener controles para ver los elementos ‘Anterior’ y ‘Siguiente’.

Características:

  • Plugin de Jquery
  • Accesible: los controles no tienen dependencia de dispositivo, permiten pausar e ir a slides concretos.
  • Si no hay Javascript se le puede dar estilo para que no se vea mal el contenido.
  • Posibilidad de mostrar dos o más bloques en un solo slide.

Leer el resto del artículo

Datos del artículo:

Javascript: Slideshow con Jquery

Fecha de publicación: 2009/08/13

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).

Datos del artículo:

Información del sitio