Image Rotator con jQuery

Este es uno de los slideshows, sliders o rotadores de imágenes más simples de implementar que he visto últimamente, requiere el uso de jQuery y se llama Automatic Image Rotator.

En la página de los desarrolladores hay información abundante respecto a los detalles y una explicación clara de su funcionamiento pero, de todas maneras, para quien simplemente quiera copiar y pegar, las cosas son sencilla.

El HTML que va allí donde uno quiera mostrarlo, es un DIV donde hay dos contenedores, en el primero iran las imágenes y en el segundo los números que son los que controla, el slider:

<div class="main_view">
  <div class="window">
    <div class="image_reel">
      <a href="#"><img src="URL_IMAGEN_1.jpg" /></a>
      <a href="#"><img src="URL_IMAGEN_2" /></a>
      <a href="#"><img src="URL_IMAGEN_3" /></a>
    </div>
  </div>
  <div class="paging">
    <a href="#" rel="1">1</a>
      <a href="#" rel="2">2</a>
      <a href="#" rel="3">3</a>
  </div>
</div>

No hay limitaciones en cuanto a la cantidad de imágenes así que pueden agregarse todas las que se quiera.

Ahora el script..

Obviamente, debemos tener jQuery agregado en el head de nuestra página:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>

Y debajo, el plugin que funcionará cuando se haya cargado la página:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $(".paging").show();
  $(".paging a:first").addClass("active");
  var imageWidth = $(".window").width();
  var imageSum = $(".image_reel img").size();
  var imageReelWidth = imageWidth * imageSum;
  $(".image_reel").css({'width' : imageReelWidth});
  rotate = function(){
    var triggerID = $active.attr("rel") - 1;
    var image_reelPosition = triggerID * imageWidth;
    $(".paging a").removeClass('active');
    $active.addClass('active');
    $(".image_reel").animate({left: -image_reelPosition}, 500 );
  }; 
  rotateSwitch = function(){
    play = setInterval(function(){
      $active = $('.paging a.active').next();
      if ( $active.length === 0) {$active = $('.paging a:first');}
      rotate();
    }, 7000); // este es el valor que define la velocidad (7 segundos)
  };
  rotateSwitch();
  $(".image_reel a").hover(function() {clearInterval(play);}, function() {rotateSwitch();});
  $(".paging a").click(function() {$active = $(this);clearInterval(play);rotate();rotateSwitch();return false;});
});
//]]>
</script>

Un poco de CSS y eso es todo:

<style>
  .main_view { /* el contendor principal */
    position: relative;
  }
  .window {  /* el contendor con las imágenes */
    overflow: hidden;
    position: relative;
    /* debemos dimensionarlo */
    height: 175px;
    width: 550px;
  }
  .image_reel { left: 0; position: absolute; top: 0; }
  .image_reel img {
    float: left;
    /* conviene dimensionarlas */
    height: 175px;
    width: 550px;
  }
  .paging { /* la navegación a gusto de cada uno */
    background-color: rgba(146, 0, 0, 0.5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80920000,endColorstr=#80920000);
    zoom: 1;
    border-radius: 4px;
    bottom: 10px;
    display: none;
    height: 42px;
    line-height: 40px;
    position: absolute;
    right: 10px;
    text-align: center;
    width: 178px;
    z-index: 100;
  }
  .paging a { /* los números */
    color: #FFF;
    font-size: 20px;
    padding: 5px;
    text-decoration: none;
  }
  .paging a.active {
    background: #920000;
    border: 1px solid #610000;
    border-radius: 3px;
    font-weight: bold;
  }
  .paging a:hover { font-weight: bold; }
</style>