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

你的重复功能只是在当前循环使用数值，因为调整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块中，因为一旦您选择了其中一个，就无需继续。

Answer 4

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

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

4 个答案: