fullPage.js是一个基于jQuery的插件，它能够很方便、很轻松的制作出全屏网站。

fullPage.js的主要功能：

• 支持鼠标滚动
• 支持前进后退和键盘控制
• 多个回调函数
• 支持手机、平板触摸事件
• 支持 CSS3 动画
• 支持窗口缩放
• 窗口缩放时自动调整
• 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式

fullPage.js官网：http://alvarotrigo.com/fullPage

touch.js在GitHub上的网址：https://github.com/alvarotrigo/fullPage.js

1、通过bower下载：

bower install fullpage --save

2、引入：

<link rel="stylesheet" type="text/css" href="/bower_components/fullpage/jquery.fullPage.css" />

<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>

<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
<script src="vendors/jquery.easings.min.js"></script>

<!-- This following line is only necessary in the case of using the option `scrollOverflow:true` -->
<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>

<script type="text/javascript" src="/bower_components/fullpage/jquery.fullPage.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/fullPage.js/2.9.3/jquery.fullpage.min.css" />

<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>

<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
<script src="https://cdn.bootcss.com/fullPage.js/2.9.3/vendors/jquery.easings.min.js"></script>

<!-- This following line is only necessary in the case of using the option `scrollOverflow:true` -->
<script type="text/javascript" src="https://cdn.bootcss.com/fullPage.js/2.9.3/vendors/scrolloverflow.min.js"></script>

<script type="text/javascript" src="https://cdn.bootcss.com/fullPage.js/2.9.3/jquery.fullpage.min.js"></script>

参考

在一个大容器中，包含每一屏，在每一屏上设置class为section， 一屏与相邻屏，只能在垂直方向上进行滚动切换。不能在水平方向上滚动切换。

示例：

<div id="full-page">
    <div class="section">
        <h3>第一屏</h3>
    </div>
    <div class="section">
        <h3>第二屏</h3>
    </div>
    <div class="section">
        <h3>第三屏</h3>
    </div>
    <div class="section">
        <h3>第四屏</h3>
    </div>
</div>

在每一屏中还可以包含可以在水平方向上滚动切换的slide。

示例：

<div id="full-page">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
    </div>
    <div class="section">第四屏</div>
</div>

必须调用此方法进行初始化。options可省略。

示例：

$('#full-page').fullpage();

options的字段有如下：

示例：

$('#full-page').fullpage({
    navigation : true,
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
    afterLoad: function (anchorLink, index) {
        console.log('进入了第' + index + '屏');
    },
    onLeave: function (index, nextIndex, direction) {
        console.log('将要离开第' + index + '屏，马上要进入第' + nextIndex + '屏');
    }
});