比如html代码为
<!--自定义导航菜单-->
<ul id="fgMenu">
<li data-menuanchor = "page1" class="active"><a href="#page1">page1</a></li>
<li data-menuanchor = "page2"><a href="#page2">page2</a></li>
<li data-menuanchor = "page3"><a href="#page3">page3</a></li>
<li data-menuanchor = "page4"><a href="#page4">page4</a></li>
</ul>
<!--定义滚动内容-->
<div id="fullpage">
<div class="section"></div>
<div class="section">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
<div class="section"></div>
<div class="section"></div>
</div>
fullpage的初始化API为
$(function(){
$("#fullpage").fullpage({
sectionsColor:['green','pink','yellow','blue']，
//依次设置四个section的背景色
controlArrows:false,
//默认为true,定义是否通过箭头来控制幻灯片，也就是HTML中class类名为slide的div，当设置为false时，左右两侧的箭头消失，如果在手机端，可以通过滑动控制幻灯片
verticalCentered:false,
//每一页内容是否垂直剧中，默认为true。
resize:true,
//定义字体是否随着窗口的缩放而缩放，默认为false,一般不会用。
scrollingSpeed:1000,
//定义页面滚动切换的速度，单位是毫秒，默认为700毫秒
anchors:['page1','page2','page3','page4'],
//定义锚点连接，默认值为空数组[]，定义锚点之后，可以点击锚点，快速定位到某一个页面。并且，当收藏并重新打开时，会直接定位到相应页
// 锚点会为每一个section添加锚点id，并且锚点数序与页面中的section顺序相同，并且会在地址栏中显示相应的锚点，比如 http://.......#page1
// 定义锚点时，锚点不能与页面中任意的id或者name相同，锚点名称前不需要加#号
lockAnchors:true,
//定义是否锁定锚链接，默认为false,如果为true，那么定义的anchors:[]锚链接则不生效，也就是网址栏里的#page1不再显示。
easing:
//定义section的滚动动画方式，默认的是easeInOutCubic，如果要修改动画方式，那么需要引入一些其他的库，比如jquery.easings插件
css3:false,
//默认为true，当为true时，支持css3的浏览器，会默认使用css3的transforms实现滚动等动画效果，提高页面加载，渲染速度。如果浏览器不支持css3，就会使用jquery代替css3实现，如果设置为false,只使用jquery实现滚动等动画效果。
loopTop:true,
//滚动到顶部后是否连续滚动到底部，默认为false,
loopBottom:true,
//滚动到底部后是否连续滚动到顶部，默认为false，
loopHorizontal:false,
//定义横向幻灯连slide是否循环展示，默认为true,
autoScrolling:false,
//是否使用fullpage插件的方式单页展示页面，默认为true,如果设置为false,那么就会出现浏览器自带的滚动条，按照浏览器默认行为滚动页面，
scrollBar:false,
//浏览器是否显示纵向滚动条，默认为false,如果设置为true，浏览器滚动条会显示，但是滑动鼠标还是按照单页滚动的形式展示，不过，拖动浏览器滚动条滚动页面的默认行为，还是有效，只是不是单页滚动的形式。
paddingTop:"50px",
paddingBottom:"50px",
//设置每个section的padding值，默认为0，比如我们想要设置固定在顶部或者底部悬浮的导航，菜单等，可以使用这两个设置
fixedElements:"#fixTop",
//固定元素，默认为null，值为jquery选择器，比如悬浮在顶部的id为fixTop的导航。在页面滚动的时候，fixedElements设置的元素固定不动，当然fixTop还是需要设置，position:fixed;top:0;
keyboardScrolling:true,
//设置是否可以使用键盘的方向键控制页面滚动，默认为true,
touchSensitivity:20,
//设置在移动端手指滑动的灵敏度，默认是5，这个值是按照屏幕的百分比来衡量的，最大值为100
continuousVertical:false,
//设置页面是否循环滚动，默认为false,如果设置为true,页面会上下循环滚动，类似于loopTop,loopBottom,但是不会出现他们两个那样滚动的时候出现页面跳动（跳动是因为又滚动动画），而是直接到顶部或者底部，并且不能和他们两个同时使用
animateAnchor:true,
//定义锚点是否可以控制页面用动画的形式滚动，默认为true,如果值为false，那么当通过锚点定位到某个页面时，不会出现动画滚动的效果，也就是直接定位到相应的页面
recordHistory:true,
//定义是否使用历史记录，默认值为true,可以通过浏览器的前进后退按钮后退到上一个但页面.如果设置为false,那么浏览器的前进后退按钮将失效，
menu:"#fgMenu",
//绑定菜单，设定的属性与anchors定义的值一一对应，菜单可以控制页面滚动，如果重新定义的话，那么就用jquery的选择器。
navigation:false,
//定义是否显示fullpage默认导航，默认为false,如果设置为true，那么页面右侧会出现一流小圆点，作为导航
navigationPosition:"left",
//设置导航小圆点的位置，navigation为true时，设置这项，值可以是left或者right,默认为right,
navigationTooltips:['这是第一页'，'这是第二页'，'这是第三页'，'这是第四页'],
//当鼠标放到导航小圆点时，显示相应页面的名称或者叫信息，默认为空的数组[]，填写时与页面一一对应。
showActiveTooltip:false,
//定义当浏览到某个页面时，navigation导航，是否显示当前页面的navigationTooltips中定义的信息，默认为false，
slidesNavigation:false,
//是否显示横向幻灯片的导航，默认为false，
slidesNavPosition:'bottom',
//设置横向幻灯片导航的位置，默认是bottom，可以设置为top
scrollOverflow:false;
// 定义如果单个页面中，内容超长了，是否显示滚动条，默认为false,如果设置为true,那么就会显示滚动条，但是需要引入jquery.slimscroll.js插件使用，否者滚动鼠标不会展示但页面超出部分，而是直接展示下一屏但页面。
sectionSelector:"#page"
//定义每一屏的选择器，默认为.section（上面为定义id值是page为每一屏选择器，下面同理）
slideSelector:"#scroll"
//定义slide幻灯片的选择器，默认为.slide，
//fullpage方法，使用方式为：$.fn.fullpage.fun() ,这里的fun()为方法名
$.fn.fullpage.moveSectionUp(),
//向上滚动一屏
$.fn.fullpage.moveSectionDown(),
//向下滚动一屏
$.fn.fullpage.moveTo(section,slide),
//滚动到第几屏页面，第几个幻灯片，如果当前页面没有幻灯片，slide参数可以不写，需要注意的是，section的参数是从1开始的，而slide的参数是0开始，比如 $.fn.fullpage.moveTo(2,2)，这里是滚动到第二屏的第三张幻灯片
$.fn.fullpage.silentMoveTo(section,slide),
//与上面的方法一样，只是在跳转的时候没有了滚动动画效果。
$.fn.fullpage.moveSlideRight()
$.fn.fullpage.moveSlideLeft()
//分别为向右滚动一张幻灯片，和向左滚动一张幻灯片
$.fn.fullpage.setAutoScrolling(boolean)
//动态设置autoScrolling
$.fn.fullpage.setLockAnchors(boolean)
//动态设置lockAnchors
$.fn.fullpage.setScrollingSpeed(milliseconds)
//动态设置scrollingSpeed
$.fn.fullpage.setAllowScrolling(boolean,[]),
//动态启用(true)禁止(false)鼠标的控制，后面的数组为参数，他的取值为all,up,right,down,left(没有先后顺序)，如果填写多个，以数组的形式填写，
$.fn.fullpage.destroy()
//如果值为空，那么销毁fullpage的所有特效，当时fullpage设置的css以及html等都还在，如果$.fn.fullpage.destroy('all'),那么页面中fullpage设置的css以及html宽高等都会销毁，只有原有html内容
$.fn.fullpage.reBuild()
//重建效果，比如ajax等更新页面内容，尺寸，等改变页面结构之后，重构页面。
//回调函数
afterLoad:function(anchorLink,index){
if(index == 2){
console.log(anchorLink)
}
}
//滚到某一屏，并且动画结束后，触发事件，并且接收anchorLink（锚链接）和index（当前屏序号，序号是从1开始算的）
onLeave：function(index,nextIndex,direction)
//当离开某一屏时，触发事件，index是离开的那一屏的序号，nextIndex为滚动到的那一屏的序号（也都是从1开始的）,direction为判断滚动方向，'up'或者'down'。return false可以取消滚动
afterRander : function(){}
//页面初始化完成后执行事件
afterResize : function(){}
//浏览器窗口改变执行事件
afterSlideLoad:function(anchorLink,index,slideAnchor,slideIndex){}
//滚动幻灯片后执行事件与afterLoad类似
onSlideLeave : function(anchorLink,index,slideIndex,direction,nextSlideIndex){}
//离开时执行事件，与onLeave类似
})
})
当需要打开页面时，默认定位到某一个页面，可以在相应的section元素上添加active类
fullpage的延时加载
用data-src代替src，比如
<img data-src="img.jpg"/>
网友评论