sinprogramar.blogspot.com

19/2/09

Crear loop de imágenes y texto en movimiento con jQuery y CSS

Un loop animado de contenidos al estilo "slide show" puede ser muy útil para presentar noticias, imágenes o por ejemplo en mi caso, anuncios clasificados.

Conseguir un efecto slide show es relativamente fácil de hacer gracias a jQuery. Unas pocas lineas de código y ya lo tienes funcionando, aunque yo he tardado varias horas para conseguir que funcionase como quería.

Aquí lo podéis ver en funcionamiento:

  • Ejemplo de slide

  • Camara digital 5Mpx



En mi caso he hecho un listado de imágenes acompañadas de un texto. Con CSS he convertido la lista en un bloque horizontal y mediante un div con "overflow:hidden" he dejado visible solo la parte que interesa.
De la animación a un lado y otro se encarga jQuery. Y el loop lo conseguimos con la función "setTimeout" autoejecutadola a si misma cada tiempo indicado. Inicialmente utilizé la función "setInterval" pero por algún motivo sólo lee los condicionales la primera vez y después se los salta.

Los detalles para crear el loop:

  • Añade la librería de jQuery a tu sitio y enlaza la desde el HEAD de esta manera:
    <script src="jquery.js" type="text/javascript"></script>

  • A continuación añade el siguiente código javascript (importante que la librería jQuery este por encima para que el javascript puede hacer uso de ella):

    <script type="text/javascript">
    $(document).ready(function(){

    var ancho = 160; //tamaño del visor
    var cantidad = 3; //cantidad de visualizaciones
    var duracion_movimiento = 1000; //tiempo en milisengundos que tarda en desplazarse
    var duracion_detenido = 1500; //tiempo entre visualizaciones
    var elemento = '#animacion' // ID al que aplicamos el movimiento


    var total = ancho*cantidad-ancho;
    var retrocediendo = false;
    mover = function(){
    var posicion = $(elemento).css('left');
    var valor = parseInt(posicion,10);
    var absoluto = Math.abs(valor);
    if(retrocediendo){
    if(absoluto <= 0){
    retrocediendo = false;
    }
    else{
    $(elemento).animate({left:'+='+ancho+'px'},duracion_movimiento);
    }
    }
    else{
    if(absoluto>= total){
    retrocediendo = true;
    }
    else{
    $(elemento).animate({left:'-='+ancho+'px'},duracion_movimiento);
    }
    }
    setTimeout("mover()",duracion_detenido);
    };
    setTimeout("mover()",duracion_detenido);

    });
    </script>

  • Ahora sólo queda añadir el HTML y los estilos:

    <div style="height:130px;width:140px;display:block;overflow:hidden;border:1px solid grey;position:relative;">

    <ul id="animacion" style="margin:0; padding:0; position:absolute; top:0; left:0; width:480px; height:150px;">

    <li style="list-style:none; width:140px; display:block; padding:10px; float:left;"><em style="height:90px;width:140px;display:block;"><img src="imagen1.jpg" /></em><p>Camara digital 7Mpx</p></li>

    <li style="list-style:none; width:140px; display:block; padding:10px; float:left;"><em style="height:90px;width:140px;display:block;"><img src="imagen2.jpg" /></em><p>Camara digital 5Mpx</p></li>

    <li style="list-style:none; width:140px; display:block; padding:10px; float:left;"><em style="height:90px;width:140px;display:block;"><img src="imagen3.jpg" /></em><p>Nokia</p></li>

    </ul>

    </div>



    Sustituye las imágenes por las tuyas o por textos. He puesto los estilos en linea, pero mejor hacerlo en una hoja de estilos.
Si quieres configurar las velocidades, tiempos, tamaños y demás puedes hacerlo variando los valores de las 4 primeras lineas del código javascript. Justo al lado están los comentarios explicando para que sirven.

Se aceptan preguntas, criticas y sugerencias.

4 comentarios:

  1. Respuestas
    1. La he probado y funciona.
      ¿Has añadido la librería de jQuery?
      Dame mas detalles para descubrir donde está el problema.

      Eliminar
  2. Que tal, muy buenas tardes, muy interesante el manejo de imágenes pero tengo una duda, como puedo ampliar el visor? es decir...intento modificar el valor de las variables pero solo consigo que el tiempo de desplazamiento sea mas rápido xD

    ResponderEliminar
  3. Para cambiar el tamaño del visor, aparte de cambiar el valor de la variable "ancho", hay que cambiar los anchos del DIV contenedor, el UL y los LI.

    ResponderEliminar


Creative Commons License