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

  

  

 

 

 

 

 

 

 

你可能感兴趣的:(全屏插件fullPage.js)