Javascript fullPage.js自动循环幻灯片放映无法前进到下一节

我正在为一个简单的网站使用插件

tl；博士 让用户在幻灯片仍在循环浏览幻灯片时滚动浏览幻灯片，以便继续查看网站的其他部分的最佳方式是什么

我的代码现在的位置。。。 我已经创建了一个功能，可以在我的一个部分中自动开始循环浏览幻灯片中的不同幻灯片，基于回答的内容。您可以看到下面链接的我的JSFIDLE，以查看它的实际操作

我的问题 我遇到的问题是使用此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);
        }
    }
}

我试过的 我调查了一下这个问题，发现是要取消间隔。我想最好的时间是在晚上

我在页面顶部设置了一个全局slideTimeout变量，然后将我的setTimeout设置为与此变量相等，但它实际上似乎没有执行clearInterval，相反，幻灯片只是在幻灯片中不断循环。我通过console.log验证了当我从幻灯片向下滚动到下一节时，onLeave回调确实被点击了

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

我在这里的一个

中有可用的代码，onLeave回调在一段时间前就被更改了。现在，它有3个参数，而不是您可以看到的2个：

onLeave索引、nextIndex、方向 一旦用户离开一个区段，在转换到新区段的过程中，就会触发此回调

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

onLeave回调已在一段时间前更改。现在，它有3个参数，而不是您可以看到的2个：

onLeave索引、nextIndex、方向 一旦用户离开一个区段，在转换到新区段的过程中，就会触发此回调

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

---

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

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

hey@Alvaro，当前是否有成功的方法？甚至在点击菜单中的链接之后，也要运行滑块？@Jeroen不知道这是什么意思。你最好提出一个新问题。嘿@Alvaro，目前有没有办法成功地做到这一点？甚至在点击菜单中的链接之后，也要运行滑块？@Jeroen不知道这是什么意思。你最好提出一个新问题。

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