Outbook
HTML+CSS+JS, Accesibilidad, PHP y más
Inicio
Desarrollo web
Javascript: Slideshow con Jquery
Contactar:
- Abandonemos de una vez el soporte a IE6 (artículo anterior)
- Mandriva 2009.1 Spring: password en MySQL (siguiente artículo)
Javascript: 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).
Artículos relacionados:
Datos del artículo:
- Publicado el Jueves 13 de agosto de 2009 a las 10:29
- Archivado en Desarrollo web
- Etiquetas: HTML, javascript, Jquery, Slideshow
- Seguimiento de comentarios (RSS 2.0).
Comentarios del artículo
Puedes comentar o hacer trackback desde tu propio sitio web.
Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.
Hay 18 comentarios a “Javascript: Slideshow con Jquery”
Luis Toscano dice:
Fecha de comentario: 2009/09/22 20:50
Me ha servido de mucho tu codigo lo voy a revisar y ver que se le puede modificar para que sea mas optimo aunque no creo que se le tenga que modificar nada saludos
José GDF dice:
Fecha de comentario: 2009/09/26 13:19
Como no tiene nada de flash, es muy ligero para la carga de las páginas.
Es perfecto para un blogroll dinámico y que no ocupa casi espacio, más que el del propio visor.
Me ha gustado, lo utilizaré, con tu permiso.
Muchas gracias por compartirlo.
Un saludo.
InKiLiNo dice:
Fecha de comentario: 2010/02/05 11:13
Va de maravilla, pero tengo un problema, lo he puesto en la parte inferior de una web y cada vez que pasa de imagen se sube arriba de la web, como si la recargará la página, y no se pueden seguir viendo las fotos, ya que hay que hacer scroll hacia abajo, y cuando cambia de foto, otra vez se vuelve a subir, y volvemos a empezar ese ciclo. ¿Alguna solución?
jervert dice:
Fecha de comentario: 2010/02/05 11:35
En el ejemplo también se sube. Para ese caso habría que darle por CSS una altura fija al DIV con id=”slides”, que es el contenedor de las distintas capas que aparecen y desaparecen.
InKiLiNo dice:
Fecha de comentario: 2010/02/05 11:51
Lo acabo de pobar y no funciona, ni poniendo el div con id=”slides” en position: absolute ni con relative, he probado con las 2 por si acaso
¿Se te ocurre alguna otra solución?
jervert dice:
Fecha de comentario: 2010/02/05 14:20
Me refería a la propiedad ‘height’. En el bloque que hay arriba del todo a la derecha (‘Outbook en Twitter’) he utilizado el mismo script de este artículo, y la diferencia que tiene con el ejemplo es que se le ha definido la propiedad ‘height’ en CSS. Con el ejemplo al que se enlaza en el artículo he probado haciendo el cambio con Firebug y lo dejaba de hacer.
jervert dice:
Fecha de comentario: 2010/02/05 14:32
He actualizado la CSS del ejemplo y la del descargable para que no se cambie sola la posición de la página.
Sebastian dice:
Fecha de comentario: 2010/02/27 21:14
Exelente articulo! Es justo lo que necesitaba. Tengo solo una duda. Estoy comenzando recien con JQuery y necesitaria poder agregar dos botones para poder ir al slide anterior y al siguiente. Hay forma de hacerlo con este script? Alguien me podria dar una mano? Desde ya les agradezco muchisimo!!
pablox dice:
Fecha de comentario: 2010/03/12 00:15
muy bueno, justo buscaba algo asi!, ahora lo pongo en practica!
Excelente!
claudia ruiz dice:
Fecha de comentario: 2010/08/28 22:06
hola quiero utilizar tu javascript pero quiero jalar las fotos desde una base de datos, ya tengo las galeria pero solo kiero aplicar tu javascript y la vdd no tengo idea de como combinar el resultado de mi consulta con tu aplciacion. la verdad me ayudarias mucho.
Gracias De Antemano.
Marco Polo dice:
Fecha de comentario: 2010/10/28 21:00
Está genial tu código, fácil de comprender y de usar.
Te agradezco mucho tu aportación.
Para fijar el slide a una determinada posición, en el css solo modifiquen #slides slide y agregen position:relative;
Saludos
flojo dice:
Fecha de comentario: 2010/11/17 17:16
Me parece fantastico, pero que propiedad hay que tocar para hacer la transición entre imagenes más suave, que no peque un salto, sino que se funda con la siguiente, es posible?
marcelo dice:
Fecha de comentario: 2010/12/14 20:59
Estoy probando tu jquery, pero sigue llendo al arriba nuevamente el sitio cuando cambia de imagen. Probe con lo que decis del css nuevo y el height y sigue haciendolo igual…tenes una solucion a esto?
Jose dice:
Fecha de comentario: 2011/01/27 12:39
Muy bueno . Lo he usado , y me he permitido la licencia de ampliarlo, poniendole una variable privada mostrarPaginacion, para controlar la muestra o no de los controles de paginacion.
cristian cena dice:
Fecha de comentario: 2011/03/08 13:38
Felicitaciones, este slide es excelente, lo acabo de probar con ietester y valla sorpresa, funciona en ie6, increíble.
Muchas gracias por el tutorial.
Un saludo.
cristian cena dice:
Fecha de comentario: 2011/03/08 13:40
respondo a “flojo”. para que no pegue el salto edita el css.
#contenedor {background-color:#fff; margin:1em auto; padding:1em; width:32.4em;
position:relative;
}
#slides .slide {
min-height:23.6em;
position:absolute;
top:0; left:0;
}
se te descuadrara el diseño pero ya no saltará, luego es cuestión de que sigas tocando el css para dejarlo a tu gusto.
cristian cena dice:
Fecha de comentario: 2011/03/08 13:43
para que la transicion sea mas suave, ve a la linea 121 del codigo js y reemplazala por esta otra:
jQuery(this.caja+’ ‘+this.slide+’:not(.activo)’).fadeOut(2000);
donde 2000 equivale a 2 segundos
Hacer un comentario
Miscelánea
Outbook en Twitter
- ♻ @olgacarreras: #Glosario de #Usabilidad y #Accesibilidad: http://t.co/5gnWIVog #ux 2012/feb/06 22:52 desde Kubuntu Choqok
- A los enfermos crónicos ni un céntimo (#pp) http://t.co/MBXtqgFh, pero a gente que no se lo gana, 145.000 euros anuales http://t.co/vxrfABa4 2012/feb/06 20:14 desde Kubuntu Choqok
- Lo que cuesta RTVE... http://t.co/jkUAgdbQ Pagan coste completo de programas, pero no tienen derechos de explotación completos. #malagestion 2012/feb/06 18:44 desde Kubuntu Choqok
- El #pp sigue la senda del #psoe: #machacar a los #autónomos. Y mientras las administraciones les deben pasta... http://t.co/rE8MtRtl 2012/feb/06 18:36 desde Kubuntu Choqok
- Diálogo intercultural en Francia: http://t.co/BAvFwjFm 2012/ene/28 22:52 desde bitly
- Twitter prepara censura selectiva por países: http://t.co/2XYlLses 2012/ene/28 19:52 desde bitly
Recomendaciones
Publi
Libros
-
HTML5: Up and Running, Mark Pilgrim
-
HTML 5: Introducción (Spanish Edition), Antonio Rodríguez Ruiz
-
Don't Make Me Think!: A Common Sense Approach to Web Usability, Steve Krug
-
Secrets of the JavaScript Ninja, John Resig
-
JavaScript and Ajax for the Web: Visual QuickStart Guide (Visual QuickStart Guides), Tom Negrino, Dori Smith
Categorías
- Accesibilidad (33)
- Bibliometría (1)
- Biblioteconomía (9)
- Biblioteconomía y documentación (6)
- CSS (53)
- Desarrollo web (195)
- Documentación (6)
- Genérico (16)
- HTML 5 (5)
- Internet (11)
- Islam (2)
- Javascript (27)
- Outbook (2)
- PHP (25)
- Progresismo (8)
- Servidores (1)
- Wordpress (1)
- XHTML (47)
Archivo
- diciembre 2011 (1)
- octubre 2011 (1)
- septiembre 2011 (1)
- agosto 2011 (1)
- julio 2011 (1)
- junio 2011 (3)
- mayo 2011 (2)
- marzo 2011 (1)
- febrero 2011 (1)
- enero 2011 (7)
- diciembre 2010 (3)
- noviembre 2010 (1)
- octubre 2010 (2)
- septiembre 2010 (3)
- agosto 2010 (1)
- julio 2010 (4)
- junio 2010 (3)
- mayo 2010 (4)
- abril 2010 (4)
- marzo 2010 (5)
- febrero 2010 (9)
- enero 2010 (10)
- diciembre 2009 (16)
- noviembre 2009 (5)
- octubre 2009 (2)
- septiembre 2009 (3)
- agosto 2009 (3)
- julio 2009 (1)
- junio 2009 (3)
- mayo 2009 (1)
- abril 2009 (1)
- marzo 2009 (4)
- febrero 2009 (3)
- enero 2009 (6)
- diciembre 2008 (5)
- noviembre 2008 (2)
- octubre 2008 (6)
- septiembre 2008 (7)
- agosto 2008 (3)
- julio 2008 (2)
- junio 2008 (8)
- mayo 2008 (4)
- abril 2008 (5)
- marzo 2008 (5)
- febrero 2008 (10)
- enero 2008 (7)
- diciembre 2007 (10)
- noviembre 2007 (3)
- octubre 2007 (6)
- septiembre 2007 (4)
- agosto 2007 (5)
- julio 2007 (7)
- junio 2007 (10)
- mayo 2007 (8)
- abril 2007 (9)
- marzo 2007 (7)
- febrero 2007 (22)
- enero 2007 (15)
- diciembre 2006 (7)
- noviembre 2006 (7)
- octubre 2006 (6)
- septiembre 2006 (4)
- agosto 2006 (3)
- julio 2006 (2)
- junio 2006 (8)
- mayo 2006 (8)
- abril 2006 (2)
- marzo 2006 (3)
- febrero 2006 (6)
- enero 2006 (4)
- diciembre 2005 (12)
- noviembre 2005 (6)
- octubre 2005 (16)
- septiembre 2005 (6)
- agosto 2005 (5)
- julio 2005 (7)
- junio 2005 (10)
- mayo 2005 (15)
- abril 2005 (13)
- marzo 2005 (3)
- febrero 2005 (5)
- noviembre 2004 (2)
- octubre 2004 (1)






Jacklead dice:
Fecha de comentario: 2009/09/07 23:34
Amigo me ha sido de mucha ayuda tu explicación de slide, te agradezco. Tengo una sola duda, qué función hay que modificar para que no se suba la página, por ejemplo cuando está en la parte más baja de la página y cambia la imagen, la pantalla se devuelve a la cabecera de la página, gracias, espero me puedas ayudar.