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

1.fullpage.js地址

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

2.fullpage.js基本配置

引入css文件和js文件

1 <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
2 <script type="text/javascript" src="js/jquery.fullPage.min.js"></script>
3 <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">

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

基本结构

1 <div id="fullpage"> 
2     <div class="section">Some section</div> 
3     <div class="section">Some section</div> 
4 </div>

初始化fullpage

1 <script>
2     $('#fullpage').fullpage();
3 </script>

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

4.fullpage常用参数配置

  <script type="text/javascript">
     $(document).ready(function(){
         $('#fullpage').fullpage({
             navigation           :true,                             //圆点导航
             navigationPosition   :'right',                        　//圆点导航位置left or right
             navigationTooltips   :['第一屏','第二屏','第三屏'],    　//圆点导航提示信息
             showActiveTooltip    :true,                             //圆点导航提示信息是否显示
             sectionsColor        :['#f00', '#f40', '#f80'],         //设置每一屏的背景色
             anchors              :['page1','page2','page3'],        //设置锚点
             menu                 :'#menu',                          //导航
             verticalCentered     :false,                            //设置元素是否垂直居中
             paddingTop           :'100px',                          //设置每一屏内容的内边距
             scrollingSpeed       :1000,                             //设置切屏速度
         });
  });
 </script>

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个参数