javascript - setInterval 中的 if 语句仅工作一次

Question

我是 Stack Overflow 的新手，所以如果我完全做了一些不应该做的事情，请原谅，并让我知道，以便我可以学习。

无论如何!代码:

$(document).ready(function() {    
    var imgWidth = $(".window").width();
    var imgSize = $(".image_reel img").size();
    var imgReelWidth = imgWidth * imgSize;


    $(".image_reel").css({
        width: imgReelWidth});

    var num = 960;
    var numImgs = $('div.image_reel img').length;
    var currentSlide = 0;

    setInterval(function() {    
        currentSlide++;

        if (currentSlide != numImgs) {
            $(".image_reel").animate({
                left: -num
            }, 1000);
        }
        else {
            var setWidth = numImgs - 1;
            var newSlideNum = num * setWidth;
            $(".image_reel").animate({
                left: newSlideNum
            }, 1000);
            currentSlide = 0;    
        }
    }, 2000);
});

这段代码应该做的事情(或者至少我认为是......)是在 2 秒后，它将循环遍历 if 语句并检查“当前幻灯片”是否等于图像有。现在我检查了警报功能，看看所有数字是否正确，确实如此，但由于某种原因， slider 只工作一次，仅此而已。有什么想法吗？

提前谢谢大家。

Answer 1

这可能是您的问题:

var numImgs = $('div.image_reel img').length;

它保存的是调用时的图像数量，而不是每次调用时的图像数量。将代码中的 numImgs 替换为 $('div.image_reel img').length ，然后查看它是否有效:

$(document).ready(function() {
    var imgWidth = $(".window").width();
    var imgSize = $(".image_reel img").size();

    $(".image_reel").css('width', imgWidth * imgSize);

    var num = 960;
    var currentSlide = 0;
    var setWidth = 0;
    var newSlideNum = 0;

    setInterval(function() {
        currentSlide++;

        if (currentSlide < $('div.image_reel img').length) {
          $(".image_reel").animate({left: -num}, 1000);
        } else {
            setWidth = numImgs - 1;
            newSlideNum = num * setWidth;
            $(".image_reel").animate({left: newSlideNum}, 1000);
            currentSlide = 0;
        }
    }, 2000);
});