fullpage.js插件常用配置项总结

1.fullpage.js地址

https://github.com/alvarotrigo/fullPage.js

2.fullpage.js基本配置

引入css文件和js文件

1 
2 
3 

fullpage.js依赖于jquery.js，所以一定要在其后引入

基本结构

1 
 
2     
Some section
 
3     
Some section
 
4 

初始化fullpage

1 

3.fullpage原理 : 更改dom结构以及应用css动画

4.fullpage常用参数配置

5.fullpage常用的几个方法

moveSectionUp() 　　　　： 向上翻一屏 用法： $.fn.fullpage.moveSectionUp();

moveSectionDown() 　　 ： 向下翻一屏 用法： $.fn.fullpage.moveSectionDown();

moveTo(section, slide) ： 跳到指定的某一屏的某一个轮播页 用法： $.fn.fullpage.moveTo('firstSlide', 2);

6.fullpagefullpage事件

onLeave: function(index, nextIndex, direction){}
当我们离开一个section后，会触发一次此回调函数，函数接收indexnextIndex,direction三个参数

• index是离开页面的序号，从1开始
• nextIndex是滚动到的目标页面的序号，从1开始
• direction判断往上滚动还是往下滚动，值是up或down

afterLoad: function(anchorLink, index){}
滚动到某一section，且滚动结束后，会触发一次此回调函数，函数接收
 anchorLink,index两个参数

• anchorLink是锚链接的名称，index是序号，从1开始计算

afterRender: function(){}
页面结构生成后的回调函数，或者说页面初始化完成后的回调函数

afterResize: function(){}
浏览器窗口尺寸改变后的回调函数

afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}
滚动到某一幻灯片后的回调函数，与afterLoad类似，接收
anchorLink, index, slideAnchor, slideIndex 4个参数

onSlideLeave: function(anchorLink, index, slideIndex, direction
在我们离开一个slide时，会触发一次此回调函数，与onLeave类似，接收
anchorLink, index, slideIndex, direction 4个参数