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语句并检查“当前幻灯片”是否等于图像有。现在我检查了警报功能，看看是否所有数字都是正确的，但是由于某种原因，滑块只能工作一次，就是这样。有什么想法吗？

先谢谢你们。

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

如果setInterval中的语句只工作一次

1 个答案: