fullpage

1、引入插件文件

<link rel="stylesheet" href="http://cdn.dowebok.com/77/css/jquery.fullPage.css">
<script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdn.dowebok.com/77/js/jquery.fullPage.min.js"></script>

2、编写HTML代码

<div id="fullpage">
	<div class="section">
		<h3>第一屏</h3>
		<p>fullPage.js — 基本演示</p>
	</div>
	<div class="section">
		<div class="slide"><h3>第二屏的第一屏</h3></div>
		<div class="slide"><h3>第二屏的第二屏</h3></div>
		<div class="slide"><h3>第二屏的第三屏</h3></div>
	</div>
	<div class="section">
		<h3>第三屏</h3>
	</div>
	<div class="section">
		<h3>第四屏</h3>
		<p>这是最后一屏</p>
	</div>

</div>

假如你需要让某一个section作为首页的第一屏展示，你只需要给这个section添加一个active的类，Fullpage会自动优先展示这个屏幕，例如定义下面的代码：

<div class="section active">Some section</div>

Fullpage自带左右滑动的幻灯片，只需要在section中添加DIV元素，并且给DIV元素添加slide类，FUllpage会自动生成幻灯片特效，例如下面的代码：

<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
<div class="slide"> Slide 4 </div>
</div>

3、初始化Fullpage

$(document).ready(function() {
$('#fullpage').fullpage();
});

参数说明

navigation
默认值：false，如果设置为true，那他将会显示一个小圆圈组成的快速导航栏。

navigationPosition
默认值：none，结合参数navigation一起使用，用于设置navigation定义的菜单显示的位置，可以设置为left/right。

navigationTooltips
默认值：[]，定义当navigation设置为true的时候，鼠标移动到快速导航上面的提示文本，每个属性中间用英文半角逗号（,）隔开。

showActiveTooltip
默认值：false，设置是否自动显示navigationTooltips中设置的工具提示文本。

slidesNavigation
默认值：false，使用方法同navigation，不过这个参数设置的导航显示位置不同，而且这个是用户设置幻灯片的。

slidesNavPosition
默认值：bottom，定义slidesNavigation中设置的导航菜单显示的位置，可选的设置值为top/bottom，你可能要修改CSS样式确定的距离从顶部或底部以及任何其他风格如颜色。

scrollingSpeed
默认值：700，每个屏幕滚动动画执行的时间，时间的单位为毫秒（ms）。

autoScrolling
默认值：true，定义屏幕是否自动滚动，还是需要用户触发事件滚动，它也影响了部分适合在平板电脑和手机浏览器/设备窗口。

scrollBar
默认值：false，定义是否使用浏览器默认的滚动条，如果使用浏览器默认的滚动条，autoScrolling配置任然生效，用户也可以自由滚动的网站与滚动条和fullpage.js将适合的部分在屏幕滚动时完成。

easing
默认值：easeInOutCubic，定义了用于垂直和水平滚动的过渡效果，它要求文件vendors/jquery.easings.min.js或者jQuery UI插件，具体的动画效果你可以参考 easings插件介绍 ，你也可以使用其它的动画插件库。

loopBottom
默认值：false，定义屏幕滚动到最后一个后，是否循环滚动到第一个。

loopTop
默认值：false，定义屏幕滚动到第一个后，是否循序滚动到最后一个。

loopHorizontal
默认值：true，定义水平的幻灯片是否循环切换。

controlArrows
默认值：true，决定是否使用控制箭头向左或向右移动幻灯片。

verticalCentered
默认值：true，决定是否初始化后，是否垂直居中网页的内容，如果你想自定义元素的位置，那么你可以设置为false，在插件初始化后调用afterrender回调函数加载其它的脚本库设置你网页的内容。

resize
默认值：true，是否在窗口改变大小后，自动调整网页中字体的大小。

sectionsColor
默认值：none，定义每个section的CSS背景演示，例如下面的代码：

$('#fullpage').fullpage({
  sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});

paddingTop
默认值：0，定义每个section固定的头部留白，例如设置paddingTop: ’10px’、 paddingTop: ’10em’、……，在使用固定表头的情况下有用的。

paddingBottom
默认值：0，定义每个section固定的底部留白，例如设置paddingBottom: ’10px’、 paddingBottom: ’10em’、……，在使用固定底部导航的情况下有用的。

http://fullpage.81hu.com/