小编典典

JavaScript无限循环延迟播放幻灯片?

javascript

如何在JavaScript中进行无限循环?我正在尝试制作幻灯片,可以正常工作,但是无法循环播放。我什至不能让它循环两次。

我现在正在使用的代码是

window.onload = function start() {
    slide();
}
function slide() {
    var num = 0;
    for (num=0;num<=10;num++) {
        setTimeout("document.getElementById('container').style.marginLeft='-600px'",3000);
        setTimeout("document.getElementById('container').style.marginLeft='-1200px'",6000);
        setTimeout("document.getElementById('container').style.marginLeft='-1800px'",9000);
        setTimeout("document.getElementById('container').style.marginLeft='0px'",12000);
    }
}

没有for的东西在那里,它确实经历了一次。当我输入for时,它要么使Firefox锁定,要么仅循环一次。我确信这是一件非常简单的事情,即使必须循环1,000,000次或进行其他操作(而不是无限循环),这对我来说也很好。

另外,我不想使用jQuery或其他人创建的东西。我正在学习JavaScript,这部分是为了帮助我学习,部分是因为我正在尝试制作尽可能多的基于HTML5的系统。

编辑:我认为它被冻结的原因是因为它一次执行所有代码,然后将其存储在缓存或其他内容中。我想要它执行的操作是一次,然后再次从顶部开始,这就是我一直认为循环的目的。在“批处理”(命令提示符)脚本中,可以使用“
GOTO”命令来完成。我不知道JS是否具有等效功能,但这确实是我的目标。


阅读 362

收藏
2020-05-01

共1个答案

小编典典

正确的方法是使用单个计时器。使用setInterval,您可以实现所需的目标,如下所示:

window.onload = function start() {
    slide();
}
function slide() {
    var num = 0, style = document.getElementById('container').style;
    window.setInterval(function () {
        // increase by num 1, reset to 0 at 4
        num = (num + 1) % 4;

        // -600 * 1 = -600, -600 * 2 = -1200, etc 
        style.marginLeft = (-600 * num) + "px"; 
    }, 3000); // repeat forever, polling every 3 seconds
}
2020-05-01