为什么我的 setInterval 函数不起作用？ - 初学者

Question

在谈到 Javascript 时，我有点初学者，并且使用在这个网站上找到的示例，我拼凑了一些我能够理解但无法开始工作的简单代码。如果有人能指出我哪里出了问题，我将不胜感激，和/或在必要时解释为什么需要彻底检修。

我的目标是在“轮播”中放置 3 张图像，这些图像会在 4 秒后随着淡入/淡出而改变。我以前能够实现这一点，但无法使其循环。

$(document).ready(function () {

    setInterval(function () {
        num = (num + 1) % 3;
    }, 4000);

    if(num > 3) {
        num = 1;
    }

    if(num = 1) {
        $(".carousel #slide-1").fadeIn();
        $(".carousel #slide-2").fadeOut();
        $(".carousel #slide-3").fadeOut();
    }
    if(num = 2) {
        $(".carousel #slide-1").fadeOut();
        $(".carousel #slide-2").fadeIn();
        $(".carousel #slide-3").fadeOut();
    }
    if(num = 3) {
        $(".carousel #slide-1").fadeOut();
        $(".carousel #slide-2").fadeOut();
        $(".carousel #slide-3").fadeIn();
    }
});

Answer 1

不要重复自己：

$(document).ready(function () {
    var num = 0;
    var action = function() {
        $(".carousel #slide-" + (num % 3) + 1).fadeIn();
        $(".carousel #slide-" + ((num + 1) % 3) + 1).fadeOut();
        $(".carousel #slide-" + ((num + 2) % 3) + 1).fadeOut();
        num = (num + 1);
    };
    setInterval(action, 4000);
    action();
});

或者，更好：

$(document).ready(function () {
    var slides = [
        $(".carousel #slide-1"),
        $(".carousel #slide-2"),
        $(".carousel #slide-3")
    ];
    var action = function() {
        slides[0].fadeIn();
        slides[1].fadeOut();
        slides[2].fadeOut();
        slides.push(slides.shift());
    };
    setInterval(action, 4000);
    action();
});

我最后的想法：

$(document).ready(function () {
    var slides = [].slice.call(document.querySelectorAll('.carousel [id^="slide-"]'));
    var action = function() {
        slides[0].fadeOut();
        slides[1].fadeIn();
        slides.push(slides.shift());
    };
    setInterval(action, 4000);
    slides.reduce(function(ignore, slide) { // fade out all slides after the first
        slide.fadeOut();
    });
    slide[0].fadeIn(); // fade in the first
});

Answer 2

不要硬编码。让它充满活力。此代码将适应.carousel下任意数量的子图像。

jQuery(function($) {
  var imgs = $('.carousel > img'),
      cur = 0;
  
  imgs.slice(1).hide();
  
  setInterval(function() {
    var hidden = cur;
    
    if (++cur >= imgs.length)
      cur = 0;
    
    if (hidden !== cur) {
      imgs.eq(hidden).fadeOut();
      imgs.eq(cur).fadeIn();
    }
  }, 4000);
});

.carousel {
  position: relative;
}

.carousel > img {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel">
  <img src="//placehold.it/200x100&text=1">
  <img src="//placehold.it/200x100&text=2">
  <img src="//placehold.it/200x100&text=3">
</div>

编辑：更新为仅触摸淡入和淡出的元素。

编辑：修复了只有一张图像时发生的淡入淡出错误。

Answer 3

$(document).ready() 触发一次。它会执行您关闭中的操作，然后退出并且永远不会回来。而您的setInterval() 只是循环num 值，其余代码不再执行。

检查下面的代码。我暂时不质疑这个想法，只是改变了它的工作方式：

$(document).ready(function () {
    var num = 0;
    var action = function() {
        if(num == 0) { // note the comparison: it's ==, not =
            $(".carousel #slide-1").fadeIn();
            $(".carousel #slide-2").fadeOut();
            $(".carousel #slide-3").fadeOut();
        } else if(num == 1) {
            $(".carousel #slide-1").fadeOut();
            $(".carousel #slide-2").fadeIn();
            $(".carousel #slide-3").fadeOut();
        } else if(num == 2) {
            $(".carousel #slide-1").fadeOut();
            $(".carousel #slide-2").fadeOut();
            $(".carousel #slide-3").fadeIn();
        }       
        num = (num + 1) % 3;
    };

    setInterval(action, 4000);
    action();
});

Answer 4

此时，您的重复函数只不过是循环遍历数值，因为调整 DOM 元素的代码在其之外。

您应该将 所有 的代码移动到重复函数中，例如：

$(document).ready(function () {
    var num = 0;
    setInterval(function () {
        num = (num + 1) % 3;
        if(num == 0) {
            $(".carousel #slide-1").fadeIn();
            $(".carousel #slide-2").fadeOut();
            $(".carousel #slide-3").fadeOut();
            return;
        }
        if(num == 1) {
            $(".carousel #slide-1").fadeOut();
            $(".carousel #slide-2").fadeIn();
            $(".carousel #slide-3").fadeOut();
            return;
        }
        if(num == 2) {
            $(".carousel #slide-1").fadeOut();
            $(".carousel #slide-2").fadeOut();
            $(".carousel #slide-3").fadeIn();
        }
    }, 4000);
});

您也会注意到我所做的一些其他更改，希望我已经掌握了所有这些更改，但可能还有其他更改：

• 初始化num 变量。
• 不使用=，而是使用== 或=== 进行平等检查。
• 语句 num = (num + 1) % 3; 已经循环通过 {0, 1, 2}，因此无需进行其他检查。
• if 语句已修改为使用 {0,1,2} 而不是 {1,2,3}。
• return 已添加到前两个 if 块中，因为一旦您选择其中一个，就无需继续。