Question

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

到目前为止，我几乎就在那里，我在页面呈现1500毫秒后设置了间隔，并在页面到达第5个“手动”部分时清除了此间隔。这里有一个工作版本：

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

到目前为止我的代码：

$(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回调尝试使用slideRight没有任何意义。

您应该只在第二部分执行此操作，而是使用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);
            }
        }
    });
});

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

1 个答案: