fullPage.js scrollSectionDown 自动循环

Question

我正在使用 fullPage.js 创建全屏滑块。滑块应自动循环显示各个部分，我使用以下代码：

var idInterval;

    $(document).ready(function () {
        $('#fullpage').fullpage({
            anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
            sectionsColor: ['#8FB98B', 'green', '#EAE1C0', '#333333', '#AA4321'],
            slidesNavigation: true,
            loopBottom: true,


            afterLoad: function (anchorLink, index) {
                if (index == 1) {
                    idInterval = setInterval(function () {
                        $.fn.fullpage.moveSectionDown();
                    }, 1500);
                }
            if (index == 5) {
                    clearInterval(idInterval);
                }
            }
        });
    });

当到达第五张幻灯片时，滑块停止并且不再继续循环。如果我不清除间隔，滑块将无法正常工作。我遵循了与使用 moveSlideRight(); 自动循环时使用的代码相同的代码；但它在某种程度上与 moveSectionDown 的工作方式不同。

查看fiddle：http://jsfiddle.net/2dhkR/254/

有什么想法吗？

Answer 1

那是因为您不需要 setInterval。在这种情况下，您需要一个 setTimeout。每次到达第 1 部分就开始间隔是没有意义的。

因为 afterLoad 在任何部分加载后都会被调用，只需使用它即可。

afterLoad: function (anchorLink, index) {
    setTimeout(function () {
        $.fn.fullpage.moveSectionDown();
    },1500);
}

Demo online

fullPage.js scrollSectionDown 自动循环

fullPage.js scrollSectionDown auto cycle

javascript

fullpage.js