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） 一旦用户离开某个部分，就会在转换到新部分时触发此回调。

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);
        }
    }
});

Answer 2

这非常适合创建自动循环。如果用户将鼠标悬停在目标元素上（如div或按钮？），是否可以暂停此操作？

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

TL;博士

我的代码现在在哪里......

我的问题

我尝试了什么

2 个答案: