Hilfe mit Jquery Bildrotator

Question

Ich muss dieses Plugin ändern, um Bilder zu drehen, ohne auf die Beendigung der Animation zu warten. Wenn Sie diesen Link besuchen, stellen Sie möglicherweise fest, dass die Animation am Ende der vorherigen Animation neu gestartet wird, aber ich möchte Bilder zurück an die Rückseite, damit ich nicht auf das Ende der ersten Animation warten muss, um mit dem nächsten zu beginnen. Irgendeine Idee, wie man das macht. Relevantes Code-Snippet von diesem Plugin ist

Die gleiche Frage wurde von einem anderen Benutzer hinzugefügt. Ich wiederhole die Frage, um zu sehen, ob ich Code-Snippets bekommen kann, wie es geht. Es ist sehr dringend.

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

Answer 1

Sie müssen im Grunde die Bilder in Ihrem Container duplizieren, um die Breite doppelt so viel wie ursprünglich zu machen. Danach sollten Sie den Container scrollen, sodass Sie, wenn eine Gruppe von Bildern vollständig ausgeblendet ist, die Containerposition transparent zurücksetzen. Hier

ist der Code:

//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 
... 

Die Funktion:

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 ;    
     }); 
    } 
}