开始入门
Fullpage是最好用的全屏滚动插件，很多前端设计师用他制作出了优秀的效果，本小节的内容将为大家介绍如何快速的使用Fullpage插件，构建自己的全屏单页网站。
1、安装插件
如果你熟悉bower或者npm，您可以使用下面的命令安装Fullpage
// With bower bower install fullpage.js // With npm npm install fullpage.js
当然您也可以从 Fullpage 的Github地址下载得到源文件，这两种方法所获取到的Fullpage插件文件是一样的。
2、引入插件文件
这个插件依赖于jQuery，所以你还需要下载jQuery，并且在Fullpage插件之前引入。
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" /> <script src="jquery.min.js"></script> <script type="text/javascript" src="jquery.fullPage.js"></script>
如果你需要自定义页面滚动的效果，你需要引入jquery.easings.min.js文件。
<script src="jquery.easings.min.js"></script>
对于内容比较多的页面，可以设置右侧的滚动条，但是默认情况下无法滚动，你需要jquery.slimscroll.min.js文件来自定义滑条滚动效果。
<script type="text/javascript" src="jquery.slimscroll.min.js"></script>
最后，如果你不想下载到项目中，您可以使用开源项目CDN服务，Fullpage在CDNJS的地址：https://cdnjs.com/libraries/fullPage.js
3、编写HTML代码
默认情况下，每一屏幕的代码都需要有DIV包裹，并且设置DIV的类名为section，默认情况下，第一个setion将作为首页显示在页面上。
<div id="fullpage"> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> </div>
假如你需要让某一个section作为首页的第一屏展示，你只需要给这个section添加一个active的类，Fullpage会自动优先展示这个屏幕，例如定义下面的代码：
<div class="section active">Some section</div>
Fullpage自带左右滑动的幻灯片，只需要在section中添加DIV元素，并且给DIV元素添加slide类，FUllpage会自动生成幻灯片特效，例如下面的代码：
<div class="section"> <div class="slide"> Slide 1 </div> <div class="slide"> Slide 2 </div> <div class="slide"> Slide 3 </div> <div class="slide"> Slide 4 </div> </div>
4、初始化Fullpage
使用jQuery的文档加载完毕以后执行函数，初始化Fullpage插件。
$(document).ready(function() {
$('#fullpage').fullpage();
});所有的选项设置更复杂的初始化可能看起来像这样：
$(document).ready(function() {
$('#fullpage').fullpage({
//Navigation
menu: false,
lockAnchors: false,
anchors:['firstPage', 'secondPage'],
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide'],
showActiveTooltip: false,
slidesNavigation: true,
slidesNavPosition: 'bottom',
//Scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: false,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,
//Design
controlArrows: true,
verticalCentered: true,
resize : false,
sectionsColor : ['#ccc', '#fff'],
paddingTop: '3em',
paddingBottom: '10px',
fixedElements: '#header, .footer',
responsiveWidth: 0,
responsiveHeight: 0,
//Custom selectors
sectionSelector: '.section',
slideSelector: '.slide',
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
});
});更多fullpage插件的使用和API文档，请访问 Fullpage 中文文档。