jQuery fullpage plugin

fullPage.js是一个基于jQuery的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有：
（1）支持鼠标滚动；
（2）支持手机、平板触摸事件；
（3）多个回调函数；
（4）支持CSS动画；
（5）支持窗口缩放；
（6）窗口缩放时自动调整；
（7）可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等。
除了IE6、7之外，几乎兼容所有的主流浏览器，fullpage是基于MIT协议的。

一、搭建fullPage.js的开发环境

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
 <title>Fullpage简单例子</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.css"/>
</head>

<body>

//开始制作全屏网站

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
</body>
</html>

二、基本的页面结构

<div id="fullpage">
 <div class="section">内容</div>
 <div class="section">内容</div>
 <div class="section">内容</div>
 <div class="section">内容</div>
</div>

三、给某一个section（页）增加slide（幻灯片）

<div class="section">
   <div class="slide">slide1</div>
   <div class="slide">slide2</div>
   <div class="slide">slide3</div>
   <div class="slide">slide4</div>
 </div>

四、激活fullpage效果

<script>
    $(document).ready(function(){
      $('#fullpage').fullpage();
    });
</script>

五、小实例（制作一个全屏网页）

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
 <title>Fullpage简单例子</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.css"/>

 <style type="text/css">
    body{
        color:#fff;/*文字为白色*/
    }
    .section1{
       background-color: green;
    }
    .section2{
       background-color: orange;
    }
    .section3{
       background-color: gray;
    }
    .section4{
       background-color: red;
    }
    .slide{
      text-align: center;
      font-size: 20px;
    }
 </style>
</head>

<body>
//开始制作
<div id="fullpage">
 <div class="section section1"><h1>这是第一屏</h1></div>
 <div class="section section2">
   <div class="slide">slide1</div>
   <div class="slide">slide2</div>
   <div class="slide">slide3</div>
   <div class="slide">slide4</div>
   <div class="slide">slide5</div>
   <div class="slide">slide6</div>
 </div>
 <div class="section section3"><h1>这是第三屏</h1></div>
 <div class="section section4"><h1>这是第四屏</h1></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
<!--激活fullpage效果-->
<script>
    $(document).ready(function(){
      $('#fullpage').fullpage();
    });
</script>
</body>
</html>

FullPage.js自学笔记（一）