整页.js:如何自动添加下一节或上一节的名称

Fullpage.js: How to automatically add the name of the next or previous section

本文关键字：一节 js 何自动 整页 添加      更新时间：2023-09-26

关于整页插件的问题：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');
                }

等等...

欢迎任何想法！

使用这个：

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

在线演示

关于直接放置在 Alvaros 解决方案下的注释：

问题=如何使上面的Alvaros解决方案适用于连续滚动页面（使用插件选项连续垂直）？

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

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

var prevText = (prev.length) ? prev.attr('data-arrow-text') : '';
var nextText = (next.length) ? next.attr('data-arrow-text') : '';
假设在这种情况下，最后一部分的名称是"

扶手椅"，第一部分的名称是"主页"，它变成：

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

就是这样！

但是，也假设您有文字地按照 Alvaro 上面建议的去做：

"并在每个部分中使用属性data-arrow-text"

相关文章：