全屏插件fullPage.js

 fullPage的github下载地址：https://github.com/alvarotrigo/fullPage.js

 fullPage demo：http://www.dowebok.com/demo/143/ 这个网站是jQuery全屏滚动插件fullPage.js演示

一.fullpage插件介绍及功能

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

2.功能：支持鼠标滚动；多个回调函数；支持手机、平板触摸事件；支持 CSS3 动画；窗口缩放时自动调整；可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等

二.引入文件

1.引入FullPage.css

<link rel="stylesheet" href="css/jquery.fullpage.css">

2.引入js文件

<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
//切记jquery在上，fullpage.min.js在下面，要注意先后顺序
	

3.根据官网步骤，定义html结构

//div#fullpage
    //>section 屏幕
    //>section 
    //>section
         //>slide 轮播图，幻灯片
	 //>slide 
		
<div id="fullpage">
     <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>

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

<div id="section">
  <div class="slide">幻灯片1</div>
  <div class="slide">幻灯片2</div>
  <div class="slide">幻灯片3</div>
  <div class="slide">幻灯片4</div>
</div>
//可以在任意第几屏中添加

4.调用Fullpage（）

<script type="text/javascript">
$(function(){
    $('#fullpage').fullpage();
});
</script>

5. Fullpage.js 配置(这些只是比较常用的配置项，其他的我们可以去https://github.com/alvarotrigo/fullPage.js来进行查阅)

<1>常用选项

   sectionsColor：null 每一屏的背景色

   controlArrows:true 是否通过箭头控制幻灯片

   navigation：flase 是否显示项目导航

   navigationPosition：right 项目导航的位置  left or right

   navigationTooltips：null 项目导航的提示

   showActiveTooltip:true 是否显示当前导航的提示信息

<script type="text/javascript">
	   var full = $("#fullpage").fullpage({
		sectionsColor:["green","pink","blue","yellow"],//设置每屏的颜色
                controlArrows:true,//是否通过箭头控制幻灯片
                navigation:true,//是否显示导航
                navigationPosition:"left",//位置
                navigationTooltips:["01","02","03","04"],//导航提示信息
                showActiveTooltip:true,//是否显示当前导航的提示信息
         })
</script>

 <2> 回调函数

      afterLoad：function(anchorLink,index){}  滚动到某一屏后的回调函数，anchorLink是锚链接的名称，index是序号，从1开始计算。

      onLeava：function(index,nextIndex,direction){}  滚动前的回调函数，index是离开页面的序号，从1开始计算，nextIndex是滚动到页面的序号，从1开始计算，direction 判断滚动的方向，up or down。

<script type="text/javascript">
	   var full = $("#fullpage").fullpage({
                    afterRender:function(){
			   console.log("加载完了...")
		}, 
              //index,离开的屏幕序号
	      //nextIndex，目标的屏幕序号
	      //direction，滚动的方法 （上，下）
	      onLeave:function(index,nextIndex,direction){
		console.log("index:"+index+",next:"+nextIndex+",direction:"+direction);
		}    
</script>