fullpage 全屏插件使用

github 官网 https://github.com/alvarotrigo/fullPage.js
中文演示地址 http://www.dowebok.com/demo/2014/77/
fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作 出全屏网站，主要功能有：

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

使用方法：
引用文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
 <!-- jquery.easings.min.js 是必须的，用于 easing 参数，也可以使用完整的 jQuery UI 代替 -->
<script src="js/jquery.easings.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

HTML 结构

<div id="fullpage">
    <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>

JavaScript入口函数

//$(function(){
//    $('#fullpage').fullpage();
//});
$(function() {
    $('#fullpage').fullpage({ //fullpage  方法里面接受json对象形式
        navigation: true, //是否显示项目导航
        loopBottom: true, //滚动到最底部后是否滚回顶部
        scrollingSpeed: 1200, //滚动速度，单位为毫秒
    });
});