fullPage.js全屏滾動插件API

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。

方法

• moveSectionUp():
  向上滾動一頁。

• moveSectionDown():
  向下滾動一頁。

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

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

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

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

• setAutoScrolling(boolean):動態設置autoScrolling

• setLockAnchors(boolean):動態設置lockAnchors

• setRecordHistory(boolean):動態設置recordHistory

• setScrollingSpeed(milliseconds):動態設置scrollingSpeed

• setAllowScrolling(boolean,[directions]):
  添加或刪除鼠標滾輪/滑動控制，第一個參數true爲啓用，false爲禁用，後面的參數爲方向，取值包含：all,up,down,left,right,可使用多個，逗號分隔。

• destroy(type):
  銷燬fullpage特效，type能夠不寫，或者使用all,不寫type,fullpage給頁面添加的樣式和html元素還在，若是使用all，則樣式、html等所有銷燬，頁面恢復和不使用fullpage相同的效果。

• reBuild():
  從新更新頁面和尺寸，用於經過ajax請求後改變了頁面結構以後，重建效果。

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就能夠實現延遲加載圖片。 

回調函數

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

  咱們能夠根據 anchorLink 和 index 參數值的判斷，觸發相應的事件。

• onLeave(index,nextIndex,direction)
  在咱們離開一個 section 時，會觸發一次此回調函數，接收 index 、 nextIndex 和 direction 3個參數：

  index是離開的「頁面」的序號，從1開始計算；
  nextIndex是滾動到的目標「頁面」的序號，從1開始計算；
  direction判斷往上滾動仍是往下滾動，值是 up 或 down。

  經過return false;能夠取消滾動

• afterRender()
  頁面結構生成後的回調函數，或者說頁面初始化完成後的回調函數

• afterResize()
  瀏覽器窗口尺寸改編後的回調函數

• afterSlideLoad(anchorLink,index,slideAnchor,slideIndex)
  滾動到某一幻燈片後的回調函數，與afterLoad相似。

• onSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex) 在咱們離開一個slide時，會觸發一次此回調函數，與onLeave相似。