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.