Javascript 为什么我的setInterval函数不起作用？-新手_Javascript_Jquery_Loops_Optimization_Setinterval

Javascript 为什么我的setInterval函数不起作用？-新手

javascript jquery loops optimization

Javascript 为什么我的setInterval函数不起作用？-新手,javascript,jquery,loops,optimization,setinterval,Javascript,Jquery,Loops,Optimization,Setinterval,谈到Javascript，我是一个初学者，使用这个网站上的示例，我拼凑了一段简单的代码，我能够理解，但无法工作。如果有人能指出我哪里出了问题，并/或解释为什么需要彻底检修，我将不胜感激我的目标是在一个“旋转木马”中有3个图像，在4秒钟后随着淡入/淡出而改变。我以前能够做到这一点，但没有能力让它循环 $(document).ready(function () { setInterval(function () { num = (num + 1) % 3; },

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

由于调整DOM元素的代码不在重复函数的范围内，因此重复函数目前只不过是在数值之间循环

您应该在repeating函数中移动所有代码，如下所示：

$(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
```
块中，因为一旦选择了其中一个块，就无需继续

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

不要重复你自己：

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

不要硬编码。让它成为动态的。此代码将适应

.carousel

下的任意数量的子图像

jQuery（函数（$）{
变量imgs=$（'.carousel>img'），
cur=0；
imgs.slice（1.hide（）；
setInterval（函数（）{
var-hidden=cur；
如果（++cur>=imgs.length）
cur=0；
如果（隐藏！==cur）{
imgs.eq（隐藏）.fadeOut（）；
imgs.eq（cur.fadeIn（）；
}
}, 4000);
});
.carousel{
位置：相对位置；
}
.carousel>img{
位置：绝对位置；
}

它正在工作-除了将num循环到0到2之外，它什么也不做-或者可能不做，因为num没有在任何地方声明，所以它只是每4秒不做任何事情，可能会发出控制台错误。。。。在控制台中查找添加HTML将有助于获得优化的解决方案您每4秒只做一件事num=…
；其余的代码只运行一次。声明var num=0
然后删除if（num>3
它永远只能是0、1或2（查找%运算符）将if（num=？
更改为if（num=？
因为您需要知道赋值、=、和等式之间的区别==…然后考虑num%3将是0、1或2的事实…因此相应地更改if
s…然后将if语句放在setinterval
匿名函数中，以便在所有幻灯片都是直接幻灯片的情况下实际执行它们只有.carousel
元素的子元素，var num=0，numOfSlides=$（'.carousel'）.children（）.length；setInterval（function（）{$（'.carousel'）.eq（num++%numOfSlides.fadeIn（）.sibles（）.fadeOut（）；}，4000）
并修复代码中的基本错误-好极了：pAw，我迟到了几分钟，但几乎是一样的。：）考虑使用else if
或return
在if
条件下褪色后。我认为else if
比return
@Nox更好，这将由我的“可能还有其他人”的评论。我的初衷不是修复每个问题，而是解释为什么它不起作用。其他问题一开始只是语法修复，但已经失控了。在任何情况下，初始HTML设置可能已经有图像1可见，2和3不可见-是的，我抓住了救命稻草：-）.我一开始考虑过，但现在觉得有点过头了。：）无论如何，这是一个不错的选择。我自己也喜欢中间的解决方案，因为它提供了一些不错的选项，这是一个很好的选择。@paxdiablo-最后一个解决方案的优点是，您不需要更改代码来更改幻灯片的数量。这里有更好的答案。很好！但实际上，这是一个非常过分的答案。：）