Ayuda con Jquery image rotator

Question

Necesito modificar este complemento para rotar las imágenes sin esperar a que termine la animación. Si visitas ese enlace, es posible que notes que la animación se reinicia al final de la animación anterior, pero quiero que las imágenes vuelvan atrás, así que no quiero esperar al final de la primera animación para comenzar la siguiente. Alguna idea de cómo hacerlo. El fragmento de código relevante de ese complemento es

el.animate({ left:"-" + el.width() + "px" }, time, "linear", function() { 
    // reset container position 
    $(this).css({ left:$("div#imageScroller").width(), right:"" }); 
    // restart animation. 
    // Problem is to restart it when last image completely appears with out pausing current animation. 
    animator($(this), duration, "rtl"); //hide controls if visible 
    ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ; 
}); 

La misma pregunta fue agregada por otro usuario. Replanteo la pregunta para ver si puedo obtener fragmentos de código sobre cómo hacerlo. Es muy urgente.

enlace - http://nettuts.s3.amazonaws.com/300_jquery/image%20Scroller/imageScroller.html

Answer 1

Es, básicamente, tiene que duplicar las imágenes en su contenedor, por lo que la anchura doble de lo inicialmente. Después de eso, debe desplazar el contenedor para que cuando un conjunto de imágenes esté completamente oculto, restablezca la posición del contenedor de forma transparente.

Aquí está el código:

//remove js-disabled class 
... 

//create new container for images 
... 

//add images to container 
... 

// Duplicate container contents 
var container = $("div#container"); 
container.html(container.html() + container.html()) ; 
container.width(2 * container.width()) ; 

//work out duration of anim based on number of images (1 second for each image) 
... 

//store speed for later (distance/time) 
... 

//set direction 
... 

//set initial position and class based on direction 
... 

La función:

var el = $("div#container") ; 
var parent = el.parent(); 
var margins = parseInt(parent.css('padding-left'),10) + parseInt(parent.css('padding-right'),10) 
     + parseInt(el.css('margin-left'),10) + parseInt(el.css('margin-right'),10) 
     + parseInt(el.css('padding-left'),10) + parseInt(el.css('padding-right'),10) 
//animator function 
var animator = function(el, time, dir) { 

    //which direction to scroll 
    if(dir == "rtl") { 
     var parent = el.parent(); 
     var limit = parent.width() - el.width() + margins ; 

     //add direction class 
     el.removeClass("ltr").addClass("rtl"); 
     //animate the el 
     el.animate({ left: limit+"px" }, time, "linear", function() { 
      //reset container position 
      $(this).css({ left:(parent.width()-el.width()/2), right:"" }); 
      //restart animation 
      animator($(this), duration/2, "rtl"); 
      //hide controls if visible 
      ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;    
     }); 
    } else { 
     var parent = el.parent(); 
     var limit = 0 - margins ; 

     //add direction class 
     el.removeClass("rtl").addClass("ltr"); 
     //animate the el 
     el.animate({ left: -limit + "px" }, time, "linear", function() { 
      //reset container position 
      $(this).css({ left:(-el.width()/2), right:"" }); 
      //restart animation 
      animator($(this), duration/2, "ltr"); 
      //hide controls if visible 
      ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;    
     }); 
    } 
}