優點：
    1.市場佔比高
    2.很好的相容性
    3.支援滑鼠鍵盤
    4.支援手機平板裝置互動操作
    5.支援css3動畫


<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

$(document).ready(function(){
    $('#fullpage').fullpage();
});

API

1.sectionsColor:['green','orange','red','lime'];
//設定背景顏色
可以為每一個section設定background-color屬性

2.controlArrows:
定義是否通過箭頭來控制slide幻燈片，預設為true，當我們設定為false，則幻燈片左右的箭頭消失，在移動端上我們可以通過滑動來控制幻燈片

3.verticalCentered:
每一頁的內容是否垂直居中，預設為true

4.resize:
字型是否隨著視窗縮放而縮放，預設為false

5.scrollingSpeed:
滾動速度，單位為毫秒，預設為700

6.anchors:
定義錨鏈接，預設值是[]。有了錨鏈接，使用者可以快速開啟定位到某一頁面。
注意定義錨鏈接的時候，值不要和頁面中任意的id或name相同，尤其在IE下，而且定義時不需要加#

7.lockAnchors:
是否鎖定錨鏈接，預設為false，若設定為true，則定義的錨鏈接就沒有效果，使用較少

8.easing:
定義頁面section滾動的動畫方式，預設為easeInOutCubic,如果修改則需引入jquery.easings外掛，或者jquery ui.

9.css3:
是否使用CSS3 transforms來實現滾動效果，預設為true。可提高支援css3的瀏覽器（如移動裝置等的速度），若瀏覽器不支援css3，則會使用jquery來代替css3實現滾動效果。（傳說中的優雅降級）

10.loopTop:
滾動到最頂部後是否連續滾動到底部，預設false

11.loopBottom：
滾動到最底部後是否連續滾動回頂部，預設false

12.loopHorizontal：
橫向slide幻燈片是否迴圈滾動，預設為true

13.autoScrolling:
是否使用外掛的滾動方式，預設為true，變為false則會出現瀏覽器自帶的滾動條，將不會按頁滾動，而是按照滾動條的預設行為來滾動

14.scrollBar:
是否包含滾動條，預設為false。設定為true，則出現瀏覽器自帶的滾動條，頁面滾動還是按頁滾動，但滾動條的預設行為也有效

15.paddingTop/paddingBottom:
設定每一個section頂部和底部的padding，預設都是0。一般如果需要設定一個固定在頂部或者底部的選單、導航、元素等，可以使用這兩個配置項。

16.fixedElements:
固定的元素，預設為null，需要配置一個jquery選擇器。在頁面滾動的時候，fixedElements設定的元素固定不動。

17.keyboardScrolling:
是否可以使用鍵盤方向鍵導航，預設為true。

18.touchSensitivity:
在移動裝置中滑動頁面的敏感性，預設為5，是按百分比來衡量，最高為100，越大滑動越難

19.continuousVertical:
是否迴圈滾動，預設為false。如果為true，則頁面會迴圈滾動，它不會像loopTop和loopBottom那樣出現跳動。
（它和loopTop、loopBottom不相容，不要同時設定）

20.animateAnchor:
錨鏈接是否可以控制滾動動畫，預設為true。若為false，則通過錨鏈接定位到某個頁面顯示不再有動畫效果。

21.recordHistory:
是否記錄歷史，預設true。可以記錄頁面滾動的歷史，通過瀏覽器的前進後退來導航。

如果設定了autoScrolling:false，那麼這個配置也將被關閉。

22.menu:
繫結選單，設定的相關屬性與anchors的值對應後，選單可以控制滾動，預設為false。可以設定為選單的jquery選擇器。

23.navigation:
是否顯示導航，預設false。若為true,會顯示小圓點作為導航

24.navigationPosition:
導航小圓點的位置，可以設定為left或者right。

25.navigationTooltips:
導航小圓點的tooltips設定，預設為[],注意按照順序設定。

26.showActiveTooltip:
是否顯示當前頁面的導航的tooltip資訊，預設為false

27.slidesNavigation:
是否顯示橫向幻燈片的導航，預設為false

28.slidesNavPosition:
橫向幻燈片導航的位置，預設為bottom，可以設定為top或bottom

29.scrollOverflow:
內容超過滿屏後是否顯示滾動條，預設為false.若設定為true，則會顯示滾動條，如果要滾動檢視內容，還需要jquery.slimscroll外掛的配合。slimscroll外掛主要用於模擬傳統的瀏覽器滾動條。

30.sectionSelector:
section的選擇器，預設為.section。

31.slideSelector:
slide的選擇器，預設為.slide。

方法

1.moveSectionUp():
向上滾動一頁。

2.moveSectionDown():
向下滾動一頁。

3.moveTo(section,slide):
滾動到第幾頁，第幾個幻燈片，注意：頁面是從1開始，而幻燈片是從0開始。

4.silentMoveTo(section,slide):
滾動到第幾頁，和moveTo一樣，但沒有動畫效果。

5.moveSlideRight():
幻燈片向右滾動。

6.moveSlideLeft():
幻燈片向左滾動。

7.setAutoScrolling(boolean):動態設定autoScrolling

8.setLockAnchors(boolean):動態設定lockAnchors

9.setRecordHistory(boolean):動態設定recordHistory

10.setScrollingSpeed(milliseconds):動態設定scrollingSpeed

11.setAllowScrolling(boolean,[directions]):
新增或刪除滑鼠滾輪/滑動控制，第一個引數true為啟用，false為禁用，後面的引數為方向，取值包含：all,up,down,left,right,可以使用多個，逗號分隔。

12.destroy(type):
銷燬fullpage特效，type可以不寫，或者使用all,不寫type,fullpage給頁面新增的樣式和html元素還在，如果使用all，則樣式、html等全部銷燬，頁面恢復和不使用fullpage相同的效果。

13.reBuild():
重新更新頁面和尺寸，用於通過ajax請求後改變了頁面結構之後，重建效果。

14.Lazy Loading

 圖片：<img data-src="image.png">
 視訊：<video>
        <source data-src="video.webm" type="video/webm"/>
        <source data-src="video.mp4" type="video/mp4"/>
    </video>

    用data-src代替src就可以實現延遲載入圖片。


回撥函式

1.afterLoad(anchorLink,index)
滾動到某一section，且滾動結束後，會觸發一次此回撥函式，函式接收 anchorLink 和 index 兩個引數， anchorLink 是錨鏈接的名稱， index 是序號，從1開始計算。

我們可以根據 anchorLink 和 index 引數值的判斷，觸發相應的事件。

2.onLeave(index,nextIndex,direction)
在我們離開一個 section 時，會觸發一次此回撥函式，接收 index 、 nextIndex 和 direction 3個引數：
index是離開的“頁面”的序號，從1開始計算；
nextIndex是滾動到的目標“頁面”的序號，從1開始計算；
direction判斷往上滾動還是往下滾動，值是 up 或 down。
通過return false;可以取消滾動

3.afterRender()
頁面結構生成後的回撥函式，或者說頁面初始化完成後的回撥函式

4.afterResize()
瀏覽器視窗尺寸改編後的回撥函式

5.afterSlideLoad(anchorLink,index,slideAnchor,slideIndex)
滾動到某一幻燈片後的回撥函式，與afterLoad類似。

6.onSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex)
在我們離開一個slide時，會觸發一次此回撥函式，與onLeave類似。