一.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>