基于JQuery的老插件fullPage.js

参考链接：http://fullpage.81hu.com/
     https://www.dowebok.com/77.html

#note#

onLeave (index, nextIndex, direction)

滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数

• index 是离开的“页面”的序号，从1开始计算；
• nextIndex 是滚动到的“页面”的序号，从1开始计算；
• direction 判断往上滚动还是往下滚动，值是 up 或 down。

$('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
        var leavingSection = $(this);
        //after leaving section 2
        if(index == 2 && direction =='down'){
            alert("Going to section 3!");
        }
        else if(index == 2 && direction == 'up'){
            alert("Going to section 1!");
        }
    }
});

取消section的滚动

你可以在onLeave 回调函数中返回false，那么将取消滚动。

$('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
        //it won't scroll if the destination is the 3rd section
        if(nextIndex == 3){
            return false;
        }
    }
});

afterLoad (anchorLink, index)

滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数。

• anchorLink 是锚链接的名称
• index 是section的索引，从1开始计算
• 在没有设置锚文本的情况下，只有使用唯一的index参数。

$('#fullpage').fullpage({
	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
	afterLoad: function(anchorLink, index){
		var loadedSection = $(this);
		//using index
		if(index == 3){
			alert("Section 3 ended loading");
		}
		//using anchorLink
		if(anchorLink == 'secondSlide'){
			alert("Section 2 ended loading");
		}
	}
});

afterRender()

这个回调函数只是在生成页面结构的时候调用。这是要用来初始化其他插件或删除任何需要的文件准备好代码的回调（这个插件修改DOM创建得到的结构）。

$('#fullpage').fullpage({
    afterRender: function(){
        var pluginContainer = $(this);
        alert("The resulting DOM structure is ready");
    }
});

afterResize()

这个回调函数在窗口发生大小改变的时候被调用，就在部分调整。

$('#fullpage').fullpage({
    afterResize: function(){
        var pluginContainer = $(this);
        alert("The sections have finished resizing");
    }
});

afterSlideLoad (anchorLink, index, slideAnchor, slideIndex)

滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数。

• anchorLink: anchorLink corresponding to the section.
• index: index of the section. Starting from 1.
• slideAnchor: anchor corresponding to the slide (in case there is)
• slideIndex: index of the slide. Starting from 1. (the default slide doesn’t count as slide, but as a section)

在没有anchorlinks的幻灯片或幻灯片SlideIndex参数是唯一使用定义的情况下。

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
 
    afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
        var loadedSlide = $(this);
 
        //first slide of the second section
        if(anchorLink == 'secondPage' && slideIndex == 1){
            alert("First slide loaded");
        }
 
        //second slide of the second section (supposing #secondSlide is the
        //anchor for the second slide
        if(index == 2 && slideIndex == 'secondSlide'){
            alert("Second slide loaded");
        }
    }
});

onSlideLeave (anchorLink, index, slideIndex, direction, nextSlideIndex)

某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数。

• anchorLink: anchorLink corresponding to the section.
• index: index of the section. Starting from 1.
• slideIndex: index of the slide. Starting from 0.
• direction: takes the values right or left depending on the scrolling direction.
• nextSlideIndex: index of the destination slide. Starting from 0.

$('#fullpage').fullpage({
    onSlideLeave: function( anchorLink, index, slideIndex, direction, nextSlideIndex){
        var leavingSlide = $(this);
 
        //leaving the first slide of the 2nd Section to the right
        if(index == 2 && slideIndex == 0 && direction == 'right'){
            alert("Leaving the fist slide!!");
        }
 
        //leaving the 3rd slide of the 2nd Section to the left
        if(index == 2 && slideIndex == 2 && direction == 'left'){
            alert("Going to slide 2! ");
        }
    }
});

取消slide滑动

你可以设置回调函数onSlideLeave 返回false，那么他将阻止此次的滑动事件，就像onLeave一样。