Fullpage.js：如何自动添加下一首或上一节

关于全页插件的一个问题的名称： http://alvarotrigo.com/fullPage/Fullpage.js：如何自动添加下一首或上一节

我在想，如果我可以自动添加一个或下一个章节的名字命名的按钮，根据您当前的部分。

我不能在这里找到它： http://alvarotrigo.com/fullPage/examples/callbacks.html

我已经做了不方便手动解决方案，但也有可能是需要一些更多的JavaScript知识，更好的自动化解决方案（一个函数或类似的东西）比我有。

这是我的（暂时）解决方案，假设我的部分名称是主页，椅子，扶手椅和凳子。

afterLoad: function(anchorLink, index){ 
       if(index == 1){ 
      $('#moveSectionUp').html('stools'); 
      $('#moveSectionDown').html('chairs'); 
       } 
       if(index == 2){ 
      $('#moveSectionUp').html('homepage'); 
      $('#moveSectionDown').html('arm chairs'); 
       }

等等...

任何想法，欢迎！

来源

2016-02-08 Cinzel

使用此：

$('#fullpage').fullpage({ 
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'], 
    afterLoad: function(anchorLink, index) { 
     var loadedSection = $(this); 
     var prev = loadedSection.prev(); 
     var next = loadedSection.next(); 

     var prevText = (prev.length) ? prev.attr('data-arrow-text') : ''; 

     var nextText = (next.length) ? next.attr('data-arrow-text') : ''; 

     console.log(nextText); 

     $('#moveSectionUp').html(prevText); 
     $('#moveSectionDown').html(nextText); 
    } 
});

，并使用属性data-arrow-text在每个部分来定义你要显示的箭头移动到该部分的文本：

<div class="section" data-arrow-text="Demo"></div>

Online demo

来源

2016-02-09 11:29:56 Alvaro

很不错的！我忘了说：我使用插件选项continuousVertical。到达最后一节时，下一节必须是第一节。当到达第一部分时，上一部分必须是最后一部分。如何使这项工作？非常感谢你！ – Cinzel

你好阿尔瓦罗，我试着做一个使用Onleave的版本，因为当你导航时，Onleave会立即作出反应，Afterload有一个小的延迟（加载时间），Onleave没有。但是，这个Onleave的例子不起作用。你能看看吗？ http://jsfiddle.net/97tbk/1121/ – Cinzel

因为在onLeave $（this）不会是加载部分，而是var leavingSection如文档中所述。您将不得不通过其索引来获取加载的部分。 – Alvaro

关于直接置于Alvaros解决方案下的评论：

问题=如何使Alvaros的上述解决方案能够连续滚动页面（使用插件选项continuousVertical）？

Answer =通过略微修改Alvaros解决方案中的代码，非常简单。这里有一个解释：

分别在下面的线，你最后和第一部分的节名的末尾替换最后一个''：

var prevText = (prev.length) ? prev.attr('data-arrow-text') : ''; 

var nextText = (next.length) ? next.attr('data-arrow-text') : '';

假设在这种情况下，最后一节的名称是'Arm Chairs'和第一部分的名称是'Homepage'，它变成：

var prevText = (prev.length) ? prev.attr('data-arrow-text') : 'Arm chairs'; 

var nextText = (next.length) ? next.attr('data-arrow-text') : 'Homepage';

就是这样！

然而，还假设你literately做什么阿尔瓦罗以上推荐：

“并在各部分使用属性data-arrow-text”

来源

2016-02-09 14:49:00 Cinzel

Fullpage.js：如何自动添加下一首或上一节

回答

相关问题