fullpage的API

比如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"/>