如何引入(fullpage插件)及使用方式

fullpage:插件简单介绍
fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站。
如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面（查看），QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的，显得更上档次，你可以试试 fullPage.js。

简单效果图:
如何引入(fullpage插件)及使用方式
主要功能有：

支持鼠标滚动

支持前进后退和键盘控制

多个回调函数

支持手机、平板触摸事件

支持 CSS3 动画

支持窗口缩放

窗口缩放时自动调整

可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
在这里插入图片描述

fullpage插件下载地址:
如何引入(fullpage插件)及使用方式
使用方法如下:
第一步: 在下载好的文件包里找到css文件"jquery.fullPage.css"和
jS文件jquery.fullPage.min.js"
第二部引入到你的html里面
Css引入文件如下:

引入jquery fullyp`在这里插入代码片`age的时候先引入一个jquer版本引入方式如下: ```

**第三步HTML里面代码实现全屏如下:**
HTML
<div id="fullpage">
      <div class="section">这是第一屏</div>
      <div class="section">
	<div class="slide">第二屏的第一张幻灯片</div>
	<div class="slide">第二屏的第二张幻灯片</div>
	<div class="slide">第二屏的第三张幻灯片</div>
	<div class="slide">第二屏的第四张幻灯片</div>
      </div>
     <div class="section">这是第三屏</div>
     <div class="section">这是第四屏</div>
</div>
```第四步:fullypage的使用方法
Javascript
$(function(){
    $('#fullpage').fullpage();
});
第五步:fullypage的配置如何使用代码如下:
		$(function(){
		    $(".fullpage").fullpage({
    	//给每个屏添加一个背景颜色
    	sectionsColor:["red","","yellow","green","blue"],
    	//给section 下面的slide幻灯片添加左右按扭 ture显示 false隐藏左右点击按钮
         controlArrows:false,
         //是否显示导航 默认为false 没有小圆点图标 ture显示有小圆点图标
         navigation:true,
         //小圆点的位置 可设置显示在左 或再右
         navigationPosition:"right",
         //显示导航小圆点旁边有数字        鼠标悬浮到小圆点才会按顺序显示1234数字的类型
         navigationTooltips: ["01","02","03","04"],
         //自动显示导航小圆点旁边的数字 让你知道这是哪一屏 不用鼠标悬浮到小圆点
         showActiveTooltip:true,
//       moveto(section，slide);
         //调用滚动上一页或者下一页的方法 $.fn.fullpage()  
//           $.fn.fullpage.moveSectionUp(section，slide);
//            $.fn.fullpage.moveSectionDown();
             //afterRender（）：页面结构生成后的回调函数，或者说页面初始化完成后的回调函数
             afterRender:function(){
                console.log("加载完了...")
             },
             //onLeave(index,nextIndex,direction) 在我们离开一个section时，会触发一次此回调函数，接收index，nextIndex和direction3个参数 
index： 是离开的页面的序号，从 1 开始， 
nextIndex：是滚动到的目标页面的序号,从 1 开始 
direction：判断向上滑动还是往下滑动，值是 up 或者 down
             onLeave:function(index,nextIndex,direction){
					console.log("index:"+index+",next:"+nextIndex+",direction:"+direction);
				}
				  })

fullpage插件简介
很方便，很轻松制作全屏页面	
fullpage插件下载使用
使用步骤
引入文件
页面骨架
fullpage方法
fullpage插件常用API
配置项、方法、回调函数

注**:这只是一些基本摘要 详细请去百度查找fullypage插件