代码之家 › 专栏 › 技术社区 › Federico

整页:当到达最后一张幻灯片时,做些什么

fullpage.js jquery javascript

Federico · 技术社区 · 7 年前

我不知道我做错了什么。

$('#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>

1 回复 | 直到 7 年前

Terry 7 年前

而不是访问 index ,您应该访问 nextSlideIndex . As per the documentation

指的是 章节索引 .从1开始。
slideIndex 幻灯片索引 .从0开始。
下一个滑动索引 指的是。从0开始。(这是您要检查的对象)

指数 永远都是 1 因为页面上只有一个部分:)

自从是一个从零开始的索引,您应该将其与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');
    }
  }
});

.章节{
文本对齐:居中;
字体:10vw/1.2em-苹果系统、BlinkMacSystemFont、无衬线;
字母间距:1em;
}

<脚本src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“>lt;/script>
<链接href=”https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css“rel=”样式表“/>

<div id=“fullpage”>
<div class=“幻灯片”>一个(<)/div>
<div class=“幻灯片”>两个(</div>
<div class=“幻灯片”>三个(</div>
<div class=“幻灯片”>重定向(<)/div>
</div>
</div>