0

我已经工作了jQuery carousel一段时间。在此过程中，我一直在提出问题以进入下一步，你们都非常有帮助。我可以看到我第一次 jQuery 冒险的隧道尽头的曙光，这应该是最后一步。

jsfiddle

$(document).ready(function() { 
var stage = $(".gallery");
var stageoffset = stage.offset();
var stageleft = stageoffset.left + 600;
var firstimage = $("img:eq(1)");
var lastimage = $("img:last");

function gallery () {
    firstimage.animate({"margin-left":"+=100px"}, {duration: 1000, easing: "linear", progress: checkBox});
};
var interv = setInterval(gallery, 1000);

function checkBox () {   
    if(!(typeof lastimage.offset() === 'undefined')) {
        var imageoffset = lastimage.offset();
        var imageleft = imageoffset.left;
        if(imageleft > stageleft) {
            lastimage.prependTo(firstimage);
            firstimage = lastimage;
            lastimage = lastimage.prev();
        };
    } else {
        clearInterval(interv);
    };
};
});

如您所见，感谢你们，检查图像是否在舞台外的功能完美运行。当这触发时，我尝试拍摄第一张图像并使用“PrependTo”拍摄该图像，并将其重新插入到行的前面。

现在，由于实际的第一张图像是最后一张图像，我将“firstimage”变量设置为新的第一张图像。然后我使用“lastimage.prev()”设置新的最后一个图像。

但是，正如您在 JSFiddle 上看到的那样，在原始的最后一个图像被添加到原始的第一个图像之后，动画就会停止。如何让动画继续流动？

4

1 回答 1

0

还添加了注释以供您参考已实现的逻辑

在此处检查更新的小提琴

$(document).ready(function() {
var img = [];
// Create images array to be looped through
img[0] = '<img src="Hydrangeas.jpg" id ="image" class="image" alt=""/>';
img[1] = '<img src="Jellyfish.jpg" id="image-two" class="image" alt=""/>';
img[2] = '<img src="Koala.jpg" id="image-three" class="image" alt=""/>';

// Counter for looping through img array
var i = 0;

var stage = $(".gallery");
stage.append(img[i]);
var secondimage = null;
var firstimage = $("img:eq(0)");
firstimage.css('margin-left', -firstimage.width());
function gallery() {
    // Since we need to show to images at a certain point of time and to move both the images i have used, firstimage and secondimage
    if (firstimage !== null) {
        // If firstimage is set animate that
        firstimage.animate({"margin-left": "+=100px"}, {duration: 1000, easing: "linear", progress: checkBox});

    }
    if (secondimage !== null) {
        // If secondimage is set animate that
        secondimage.animate({"margin-left": "+=100px"}, {duration: 1000, easing: "linear", progress: checkBox});
    }
}
var interv = setInterval(gallery, 1000);

function checkBox() {
    // If first image is not null and second is null and first image is about to move out of div, 
    // set second image as another iteration of img variable, once it moves out it is set as null
    // If second image is not null and first is null and second image is about to move out of div,
    // set first image as another iteration of img variable, once it moves out it is set as null
    // Finally, if all the iterations are set, then set i as -1 i.e. reset counter
    if ((secondimage === null && firstimage !== null && parseInt(firstimage.css('margin-left')) > parseInt(stage.width() / 3))
            || (firstimage === null && secondimage !== null && parseInt(secondimage.css('margin-left')) > parseInt(stage.width() / 3)) || (i === -1)) {
        i += 1;
        if (i < img.length) {
            stage.prepend(img[i]);
            $("img:eq(0)").css('margin-left', -$("img:eq(0)").width());
            if (secondimage === null) {
                secondimage = $("img:eq(0)");
            } else {
                firstimage = $("img:eq(0)");
            }
        } else {
            i = -1;
        }
    } else if (firstimage !== null && (parseInt(firstimage.css('margin-left')) > parseInt(stage.width()))) {
        // remove first image
        firstimage.remove();
        firstimage = null;
    } else if (secondimage !== null && (parseInt(secondimage.css('margin-left')) > parseInt(stage.width()))) {
        // remove second image
        secondimage.remove();
        secondimage = null;
    }

}
});
于 2013-07-15T06:25:11.670 回答