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>
