Question

我希望以特定的时间间隔循环播放5页。以下代码仅适用于遍历所有页面一次。我怎么能这样做，以便它无限循环通过这5页而不是只运行一次？

HTML

<div class="page">Page 2 Content</div>
<div class="page">Page 3 Content</div>
<div class="page">Page 4 Content</div>
<div class="page">Page 5 Content</div>

的Javascript

window.onload = function() {
    var TIME_PER_PAGE = 2000;
    var pages = document.querySelectorAll('.page');
    var numPages = pages ? pages.length : 0;
    var i = -1;

    function nextPage() {
        if (i >= 0)
            pages[i].classList.remove('currentPage');
        i++;
        pages[i].classList.add('currentPage');
        if (i < numPages - 1)
          setTimeout(nextPage, TIME_PER_PAGE);
    }

    nextPage();
}

Answer 1

以下是代码段和工作小提琴：http://jsfiddle.net/u62bqb62/1/

function nextPage() {
    if (i >= 0)
        $(pages[i]).removeClass('currentPage');

    i = ++i % numPages;

    $(pages[i]).addClass('currentPage');

    setTimeout(nextPage, TIME_PER_PAGE);
}

如何使用javascript自动循环页面？

1 个答案: