FULLPAGE：到达最后一张幻灯片时，做一些事情

Question

我在我的作品集页面上使用 Fullpage。

我想要实现的是，当你到达最后一张幻灯片时，会发生一些事情。
我不知道我做错了什么。

在此先感谢您的宝贵帮助。

$('#fullpage').fullpage({
controlArrowColor: "#000",
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex) {
    if (index === $('.fp-section.active .fp-slide').length) {
        window.location.href = "http://google.com"
    }
}
});

.section {
    text-align:center;
    font:10vw/1.2em -apple-system,BlinkMacSystemFont,sans-serif;
    background:#fff;
    letter-spacing:.1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<link href="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" rel="stylesheet"/>

<div id="fullpage">
    <div class="section">
        <div class="slide">ONE</div>
        <div class="slide">TWO</div>
        <div class="slide">THREE</div>
        <div class="slide">REDIRECT</div>
     </div>
</div>

Answer 1

您应该访问 nextSlideIndex，而不是访问 index。 As per the documentation:

index 引用 部分的索引 。从 1.
slideIndex 指的是 幻灯片的索引。从0开始。
nextSlideIndex 指的是目标幻灯片的索引。从 0 开始。（这是你要检查的那个）

Note: index will always be 1 because you only have a single section on the page :)

由于 nextSlideIndex 是一个从零开始的索引，您应该将其与 1 减去幻灯片的总长度进行比较，以了解您是否已到达最后一张幻灯片。

if (nextSlideIndex === $('.fp-section.active .fp-slide').length - 1) { // Final slide reached console.log('Final slide reached'); }

查看概念验证示例：

$('#fullpage').fullpage({ controlArrowColor: "#000", onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex) { if (nextSlideIndex === $('.fp-section.active .fp-slide').length - 1) { // Final slide reached console.log('Final slide reached'); } } });

.section { text-align: center; font: 10vw/1.2em -apple-system, BlinkMacSystemFont, sans-serif; background: #fff; letter-spacing: .1em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script> <link href="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" rel="stylesheet" /> <div id="fullpage"> <div class="section"> <div class="slide">ONE</div> <div class="slide">TWO</div> <div class="slide">THREE</div> <div class="slide">REDIRECT</div> </div> </div>

更新：如果你想在幻灯片完成转换后执行操作，我建议收听afterSlideLoad callback:

$('#fullpage').fullpage({ controlArrowColor: "#000", afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) { if (slideIndex === $('.fp-section.active .fp-slide').length - 1) { // Final slide reached console.log('Final slide reached'); } } });

$('#fullpage').fullpage({ controlArrowColor: "#000", afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) { if (slideIndex === $('.fp-section.active .fp-slide').length - 1) { // Final slide reached console.log('Final slide reached'); } } });

.section { text-align: center; font: 10vw/1.2em -apple-system, BlinkMacSystemFont, sans-serif; background: #fff; letter-spacing: .1em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script> <link href="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" rel="stylesheet" /> <div id="fullpage"> <div class="section"> <div class="slide">ONE</div> <div class="slide">TWO</div> <div class="slide">THREE</div> <div class="slide">REDIRECT</div> </div> </div>

FULLPAGE：到达最后一张幻灯片时，做一些事情

FULLPAGE: when reaching the last slide, do something

javascript

jquery

fullpage.js