javascript - 设置和清除间隔以自动滚动 fullPage.js 中的部分

Question

我一直在尝试使用 fullPage.js 创建一个网站，其中有 5 个垂直部分，其中 2 个有水平幻灯片。其中一个我想自动横向滚动，另一个我想手动滚动，即由用户控制。

到目前为止，我已经差不多完成了，我将页面渲染后的间隔设置为 1500 毫秒，并在页面到达第 5 个“手动”部分时清除此间隔。这里有一个工作版本:

http://jsfiddle.net/2dhkR/187/

我遇到的两个问题是，到达第五部分后，返回到第二个“自动”滚动部分时，滚动不会恢复。此外，第五部分在停止之前仍然滚动一张幻灯片。

这是我到目前为止的代码:

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

        afterRender: function(){
        idInterval = setInterval(function(){
                $.fn.fullpage.moveSlideRight();
        }, 1500);
    },

        //turns off the automatic scrolling. NEEDS TO BE TURNED BACK ON
        afterLoad: function(anchorLink, index){
           //using index
           if(index == 5){
               clearInterval(idInterval);
           }
    }
});
    });

我尝试重置此后的间隔，使用:

           if(index == 2){
               setInterval(function(){
                $.fn.fullpage.moveSlideRight();
        }, 1500);
           }

但这不起作用，并且似乎加快了自动滚动的速度。

有人可以帮我订购这些命令，并决定使用哪个 fullpage.js 回调( https://github.com/alvarotrigo/fullPage.js#callbacks )吗？

非常感谢

Answer 1

尝试使用 afterRender 回调来 sliderRight 没有任何意义。

您应该只在第二部分执行此操作，而是使用 afterLoad 回调，该回调也会在您每次访问某个部分时触发。

Living demo

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 == 2) {
                idInterval = setInterval(function () {
                    $.fn.fullpage.moveSlideRight();
                }, 1500);
            }
            //using index
            if (index == 5) {
                clearInterval(idInterval);
            }
        }
    });
});