1.简介
fullPage.js 是一个基于jQuery的插件，它能够很方便、很轻松的制作出全屏网站。fullPage属于jquery很常用的插件，虽然目前很多web应用用react开发，但功能较少的web还是用jQuery吧。
- 支持鼠标滚动
- 支持前进后退和键盘控制
- 多个回调函数
- 支持手机、平板触摸事件
- 支持 CSS3 动画
- 支持窗口缩放
- 窗口缩放时自动调整
- 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
1. 使用
（1）引入插件文件这个插件依赖于jQuery，所以你还需要下载jQuery，并且在Fullpage插件之前引入。
<link href="https://cdn.bootcss.com/fullPage.js/2.9.4/jquery.fullpage.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
如果你需要自定义页面滚动的效果，你需要引入jquery.easings.min.js文件。
<script src="https://cdn.bootcss.com/fullPage.js/2.9.4/vendors/jquery.easings.min.js"></script>
对于内容比较多的页面，可以设置右侧的滚动条，但是默认情况下无法滚动，你需要jquery.slimscroll.min.js文件来自定义滑条滚动效果。
<script src="https://cdn.bootcss.com/fullPage.js/2.9.3/vendors/scrolloverflow.min.js"></script>
（2）编写HTML代码
默认情况下，每一屏幕的代码都需要有DIV包裹，并且设置DIV的类名为section，默认情况下，第一个setion将作为首页显示在页面上。假如你需要让某一个section作为首页的第一屏展示，你只需要给这个section添加一个active的类，fullPage会自动优先展示这个屏幕，fullPage自带左右滑动的幻灯片，只需要在section中添加DIV元素，并且给DIV元素添加slide类，fullPage会自动生成幻灯片特效。
<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>
（3）初始化Fullpage
$(document).ready(function() {
$('#fullpage').fullpage();
});