全屏插件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

2.引入js文件

//切记jquery在上，fullpage.min.js在下面，要注意先后顺序
	

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

//div#fullpage
    //>section 屏幕
    //>section 
    //>section
         //>slide 轮播图，幻灯片
	 //>slide 
		

     

	    
第一屏
     
     

	    
第二屏
     
     

	    
第三屏
     
     

	    
第四屏
     

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

  
幻灯片1
  
幻灯片2
  
幻灯片3
  
幻灯片4

//可以在任意第几屏中添加

4.调用Fullpage（）

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 是否显示当前导航的提示信息

 <2> 回调函数

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

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