jQuery fullPage插件

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();

});