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

原文 标签 javascript jquery setinterval clearinterval fullpage.js

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

到目前为止,我快到了,我将页面渲染后的时间间隔设置为1500 ms,并在页面到达第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)?

非常感谢

最佳答案

您尝试使用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);
            }
        }
    });
});

关于javascript - 设置和清除间隔以自动滚动fullPage.js中的部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26849126/

相关文章:

javascript - 为什么Chrome Canary不支持我的threejs AR [ARCore] Web应用程序?

jquery - jQuery 中的循环图像 - 随机化吗?

node.js - 如何在方法上测试setInterval?

javascript - 如何在setInterval(function(){…})中传递服务器已发送事件对象

javascript - 单击下一个菜单项时,防止向下滑动子菜单向上滑动

javascript - Vue Cli 3 项目不会生成 manifest.json (PWA)

javascript - 如何在页面中拥有一个jQuery Player对象的多个实例(音频对象)

javascript - Material Design Lite 菜单在谷歌浏览器中不起作用

javascript - 在选项中添加图像

javascript - 使用 jQuery .promise() 调用 clearInterval()