Jquery 使用“后停止动画”；prependTo（）？”；

我已经在一个

jquerycarousel

上工作了很长时间。一直以来，我都在问问题，以便进入下一步，你们都很有帮助。我可以在我第一次jQuery冒险的隧道尽头看到曙光，这应该是最后一步了

正如你们所看到的，多亏了你们，检查图像是否在舞台外的功能运行得非常好。当触发时，我尝试拍摄第一张图像并使用“PrependTo”拍摄该图像，然后将其重新插入到行的前面

现在，因为实际的第一个图像是最后一个图像，所以我将“firstimage”变量设置为新的第一个图像。然后，我使用“lastimage.prev（）”设置新的最后一个图像

---

但是，正如您在JSFIDLE上看到的，在原始的最后一个图像被预先添加到原始的第一个图像之后，动画停止。如何使动画继续流动？

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

检查更新的小提琴

$（文档）.ready（函数（）{
var-img=[]；
//创建要循环的图像数组
img[0]=''；
img[1]=''；
img[2]=''；
//用于通过img阵列循环的计数器
var i=0；
var阶段=$（“.gallery”）；
阶段追加（img[i]）；
var secondimage=null；
var firstimage=$（“img:eq（0）”）；
css（'margin-left'，-firstimage.width（））；
函数库（）{
//因为我们需要在某个时间点向图像显示，并移动我使用的两个图像，firstimage和secondimage
if（firstimage！==null）{
//如果设置了firstimage，则为其设置动画
动画（{“左边距”：“+=100px”}，{持续时间：1000，缓和：“线性”，进度：复选框}）；
}
if（secondimage！==null）{
//如果设置了secondimage，则为其设置动画
动画（{“左边距”：“+=100px”}，{持续时间：1000，缓和：“线性”，进度：复选框}）；
}
}
var interv=设定间隔（画廊，1000）；
函数复选框（）{
//如果第一个映像不为null，第二个映像为null，并且第一个映像即将移出div，
//将第二个图像设置为img变量的另一个迭代，一旦它移出，则设置为null
//如果第二个映像不为null，第一个映像为null，第二个映像即将移出div，
//将第一个图像设置为img变量的另一个迭代，一旦它移出，则设置为null
//最后，如果设置了所有迭代，则将i设置为-1，即重置计数器
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；
如果（iparseInt（stage.width（）））{
//删除第一个图像
firstimage.remove（）；
firstimage=null；
}else if（secondimage！==null&（parseInt（secondimage.css（'margin-left'））>parseInt（stage.width（）））{
//删除第二个图像
secondimage.remove（）；
secondimage=null；
}
}
});  

谢谢，这不是我想要的。最终的结果是不稳定的，我宁愿完全重新启动，也不愿使用劣质产品。如果图像在列表的前面，为什么不能将动画应用到新的第一个图像，并让该图像像原始第一个图像一样推动其余图像？也许我只需要在动画被预先设置好后停止动画，然后用新参数重新启动它？互联网上到处都是无缝无休止的jQuery滑块，因此必须有一种方法来实现效果。是的，当然有，但是你不能仅仅通过移动第一个元素来使用它，我猜你必须单独移动所有图像，以便实现相同的效果。如果你想，我可以尝试帮助你实现相同的效果。因此，动画不会应用于新的第一幅图像，因为变量firstimage保存原始的第一幅图像，而不是更新后的第一幅图像。我试过影响所有的图像，由于某种原因，我得到了不同的速度。应用相同的动画可以在图像上获得不同的速度。嗯，在将“lastimage”设置为新的“lastimage”之前，不应该将变量“firstimage”设置为列表前面的“lastimage”吗？

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

$(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;
    }

}
});