帮助jquery图像旋转

Question

我需要修改这个插件来旋转图像，而无需等待动画结束。如果您访问该链接，您可能会注意到动画在前一个动画结束时重新开始，但是我希望图片背靠背，因此我不想等待第一个动画的结尾开始下一个动画。任何想法如何做到这一点。该插件的相关代码片段是

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

另一个用户添加了同样的问题。我正在重新发布该问题，看看我是否可以获取有关如何执行此操作的代码段。这非常紧急。

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

Answer 1

你基本上需要复制的图片放到你的货柜，使得宽度两倍最初。之后，您应该滚动容器，以便当一组图像完全隐藏时，透明地重置容器位置。

下面是代码：

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

功能：

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