fullPage.js插件使用（一）

最新推荐文章于 2019-12-31 10:05:29 发布

es716

最新推荐文章于 2019-12-31 10:05:29 发布

阅读量895

点赞数

分类专栏：前端文章标签：前端 fullPage插件

本文链接：https://blog.youkuaiyun.com/MLeeM/article/details/50440720

版权

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了fullPage.js插件的各种方法，如上下滚动、切换幻灯片，以及动态设置选项。同时，讲解了其回调函数，包括滚动结束、离开section、页面初始化和尺寸改变等事件的监听处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

fullPage.js的方法：

 1. moveSectionUp()

功能：向上滚动一页。

 2. moveSectionDown()

功能：向下滚动一页。

3. moveTo(section, slide)

功能：滚动到第几页的第几个幻灯片。
注意：页面是从1开始，幻灯片是从0开始。

4. silentMoveTo(section, slide)

功能：滚动到第几页的第几个幻灯片，但是没有动画效果。

5. moveSlideRight()

功能：幻灯片向右滚动。

6. moveSlideLeft()

功能：幻灯片向左滚动。

7. setAutoScrolling(boolean)

功能：动态设置autoScrolling。

8. setLockAnchors(boolean)

功能：动态设置lockAnchors。

9. setRecordHistory(boolean)

功能：动态设置recordHistory。

10. setScrollomgSpeed(milliseconds)

功能：动态设置scrollingSpeed。

11. setAllowScrolling(boolean,[directions])

功能：添加或者删除鼠标滚轮/滑动控制。第一个参数true为启用，false为禁用。
后面的参数为方向，取值包含all, up, down, left, right，可以使用多个，逗号隔开。

fullPage.js的回调函数：

 1. afterLoad(anchorLink, index)

功能：滚动到某一section，并且滚动结束后，会触发一次回调函数，函数接收anchorLink和index两个参数，anchorLink是锚链接的名称，index是序号，从1开始计算。
例如：

afterLoad:function(anchorLink, index){
    console.log("anchorLink:"+anchorLink+"\t index:"+index);
},

 2. onLeave(index, nextIndex,direction)

功能：在离开一个section时，会触发一次调回函数，接收index、nextIndex和direction 三个参数。
index是离开页面的序列号，从1开始算起；
nextIndex是滚动到目标页面的序列号，从1开始算起。
direction是判断向上还是向下滚动，值为up或down。
例如：

onLeave:function(index,nextIndex,direction){
    console.log("index:"+index+" nextIndex:"+nextIndex+" direction:"+direction);
},

 3. afterRender()

功能：页面结构生成后的回调函数，或者说是页面初始化完成后的回调函数。
例子：

afterRender:function(){
    console.log("afterRender");
},

 4. afterResize()

功能：浏览器窗口尺寸改变后的回调函数。
例子：

afterResize:function(){
    console.log("afterResize");             },

 5. afterSlideLoad(anchorLink, index, slideAnchor, slideIndex)

功能：滚动到某一幻灯片后的回调函数，与afterLoad类似。slideAnchor、slideIndex起始值为0。
例子：

afterSlideLoad:function(anchorLink, index, slideAnchor, slideIndex){
    console.log("anchorLink:" + anchorLink +"　index:" + index +"　slideAnchor:" + slideAnchor +"　slideIndex:" + slideIndex　);
},

 6. onSlideLeave(anchorLink, index, slideAnchor, direction, slideIndex)

功能：在离开一个slide时，会触发一次的回调函数，与onLeave类似。direction的值为left或者right。slideAnchor、slideIndex起始值为0。
例子：

onSlideLeave:function(anchorLink, index, slideAnchor, direction, slideIndex){
    console.log("anchorLink:" + anchorLink +"　index:" + index +"　slideAnchor:" + slideAnchor +"　direction:" + direction +"　slideIndex:" + slideIndex　);
},