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

另一位用户也添加了同样的问题。我正在重新发布问题，看看我是否可以获得有关如何执行此操作的代码段。

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

如何在不等待动画结束的情况下旋转图像？

1 个答案: