Question

有关Fullpage插件的问题： http://alvarotrigo.com/fullPage/

我想知道是否可以根据您所在的当前部分自动将下一个或上一个部分的名称添加到按钮中。

我在这里找不到： 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');
                }

依旧......

欢迎任何想法！

Answer 1

使用此：

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

Answer 2

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

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

答案=通过稍微修改Alvaros解决方案中的代码非常简单。这是一个解释：

将以下行末尾的最后一个fprintf分别替换为您上一个和第一个部分的部分名称：

''

假设在这种情况下，最后一部分的名称是“扶手椅”，第一部分的名称是“主页”，它变为：

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

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

就是这样！

然而，也假设你明智地做了上面推荐的Alvaro：

“并在每个部分使用属性var prevText = (prev.length) ? prev.attr('data-arrow-text') : 'Arm chairs'; var nextText = (next.length) ? next.attr('data-arrow-text') : 'Homepage';”

Fullpage.js：如何自动添加下一个或上一个部分的名称

2 个答案: