javascript - fullPage.js 自动循环播放幻灯片无法前进到下一部分

Question

我正在与 fullPage.js 合作我正在做的一个简单网站的插件。

tl;博士

允许用户在幻灯片仍在循环播放的同时滚动浏览幻灯片，以便他们可以继续查看网站的其他部分的最佳方式是什么？

我的代码现在所在的位置...

我创建了一项功能，可以根据this GitHub issue自动开始循环浏览我的一个部分中幻灯片的不同幻灯片。这已得到答复。您可以查看下面链接的我的 jsFiddle 以查看其实际情况。

我的问题

我遇到的问题是使用这个 setTimeout自动循环浏览幻灯片，如果我尝试滚动(或以任何方式导航)到页面的另一个部分，setTimeout继续进行，因此我会回到幻灯片继续循环播放。我的代码使用 setTimeout看起来像这样:

afterRender: function () {
    //on page load, start the slideshow
    setTimeout(function () {
        $.fn.fullpage.moveTo(1, 0);
    }, 1000);
},
afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {
    if (anchorLink == 'home') {
        //make the slideshow automatically go!
        setTimeout(function () {
            $.fn.fullpage.moveTo(1, slideIndex + 1);
        }, 1000);

        //if you are at the last slide
        //then cycle back to the first
        if (slideIndex == 2) {
            setTimeout(function () {
                $.fn.fullpage.moveTo(1, 0);
            }, 1000);
        }
    }
}

我尝试了什么

我调查了这个问题并看到 a possible solution是clearInterval 。我认为执行此操作的最佳时间是 onLeave callback 。

onLeave: function (index, direction) {
    //after leaving section 1 (home) and going anywhere else, stop the slideshow
    if (index == '1') {
        clearInterval(slideTimeout);
    }
}

我设置了一个全局slideTimeout变量在我的页面顶部，然后设置我的 setTimeout上面等于这个变量，但它实际上似乎并没有做 clearInterval相反，幻灯片只是不断循环播放幻灯片。我验证(通过 console.log)当我从幻灯片向下滚动到下一部分时，onLeave回调确实被击中。

我不完全确定clearInterval是我理想的解决方案，因为我不一定希望幻灯片完全停止循环(因为最终用户可能会返回幻灯片，而我希望它继续循环)。

我在 jsFiddle 中提供了代码

Answer 1

onLeave 回调函数不久前已更改。现在它有 3 个参数，而不是 2 个，如您所见 in the documentation :

onLeave: function(index, nextIndex, direction){

onLeave (index, nextIndex, direction) This callback is fired once the user leaves a section, in the transition to the new section.

Here you have it working使用 setInterval 和 clearInterval。我还使用了 moveSlideRight 而不是 moveTo，并且删除了不再需要的 afterSlideLoad 回调。

这是生成的代码:

var slideTimeout;

$('#fullpage').fullpage({
    sectionsColor: ['#ccc', '#999', '#777'],
    anchors: ['home', 'about', 'contact'],
    animateAnchor: false,
    menu: '.nav',
    paddingTop: '50px',
    verticalCentered: false,
    slidesNavigation: true,
    slidesNavPosition: 'bottom',
    css3: true,
    afterRender: function () {
        //on page load, start the slideshow
         slideTimeout = setInterval(function () {
                $.fn.fullpage.moveSlideRight();
            }, 1000);
    },


    onLeave: function (index, direction) {
        //after leaving section 1 (home) and going anywhere else, whether scrolling down to next section or clicking a nav link, this SHOULD stop the slideshow and allow you to navigate the site...but it does not
        if (index == '1') {
            console.log('on leaving the slideshow/section1');
            clearInterval(slideTimeout);
        }
    }
});