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