2


我为纯 javascript-css tuorial 编写的一些代码一直存在问题。我是 javascript 的新手，我编写了这段代码来练习，但我认为这对于我为客户做的一些工作来说是完美的。要更改幻灯片，我有五个函数，第一个是启动 onload，然后我使用 settimeout 执行下一个，下一个，下一个，直到 5，当它循环回到一个，并进入无限循环，直到用户按下暂停（cleartimeout）。我的问题是，如何在停留在当前幻灯片（函数）上时重新启动 settimeout 循环？注意：我现在真的想坚持使用 javascript，所以我宁愿没有 jquery 解决方案。

如果您想查看实际的幻灯片：http: //fudgepants.com/beta/slideshow/ ，您可以按 F12 查看源代码。

4

1 回答 1

3

您可以创建一个单独的函数来控制要调用的函数。我们称之为 showNextSlide()。

该函数将有一个从 1 到 5 循环的绑定变量。它在自身上调用 setTimeout() 并且要恢复，您只需再次调用该函数，因为它仍然知道它在哪里停止。

// keep a reference to the most recent setTimeout() call
var timeOutId;

function showNextSlide()
{
    // initialize the bound variable for the first time
    // this variable gets preserved upon subsequent calls
    this.idx = this.idx || 0;

    switch (this.idx) {
        case 0:
            // code to show slide 1
            break;
        case 1:
            // show slide 2
            break;
        // etc.
    }

    // increase the counter and make sure it doesn't go over 4
    // i.e. 0, 1, 2, 3, 4, 0, 1, 2, 3, 4
    this.idx = (this.idx + 1) % 5;

    // call me in 5 seconds
    timeOutId = setTimeout(showNextSlide, 5000);
}
于 2012-10-20T00:36:57.897 回答