在頁面引入，需要先引入jQuery
進入cdnjs官網，搜索fullpage
jquery.fullPage.css
jquery.fullPage.js
jquery.easings.min.js
基本的頁面結構
<div id="fullpage">
<div class="section">一些內容</div>
<div class="section">一些內容</div>
<div class="section">一些內容</div>
<div class="section">一些內容</div>
</div>
實現基本效果
給某一個slide（頁）增加slide(幻燈片)
<div class="section">
<div class="slide">Slide1</div>
<div class="slide">Slide2</div>
<div class="slide">Slide3</div>
<div class="slide">Slide4</div>
</div>
激活fullpage效果
$(document).ready(function(){
$('#fullpage').fullpage();
});
API
sectionsColor:['green','orange','red','lime'];
//設置背景顏色
可以為每一個section設置background-color屬性controlArrows:
定義是否通過箭頭來控制slide幻燈片，默認為true，當我們設置為false，則幻燈片左右的箭頭消失，在移動端上我們可以通過滑動來控制幻燈片verticalCentered:
每一頁的內容是否垂直居中，默認為trueresize:
字體是否隨著窗口縮放而縮放，默認為falsescrollingSpeed:
滾動速度，單位為毫秒，默認為700anchors:
定義錨鏈接，默認值是[]。有了錨鏈接，用戶可以快速打開定位到某一頁面。
注意定義錨鏈接的時候，值不要和頁面中任意的id或name相同，尤其在IE下，而且定義時不需要加#lockAnchors:
是否鎖定錨鏈接，默認為false，若設置為true，則定義的錨鏈接就沒有效果，使用較少easing:
定義頁面section滾動的動畫方式，默認為easeInOutCubic,如果修改則需引入jquery.easings插件，或者jquery ui.css3:
是否使用CSS3 transforms來實現滾動效果，默認為true。可提高支持css3的瀏覽器（如移動設備等的速度），若瀏覽器不支持css3，則會使用jquery來代替css3實現滾動效果。（傳說中的優雅降級）loopTop:
滾動到最頂部后是否連續滾動到底部，默認falseloopBottom：
滾動到最底部后是否連續滾動回頂部，默認falseloopHorizontal：
橫向slide幻燈片是否循環滾動，默認為trueautoScrolling:
是否使用插件的滾動方式，默認為true，變為false則會出現瀏覽器自帶的滾動條，將不會按頁滾動，而是按照滾動條的默認行為來滾動scrollBar:
是否包含滾動條，默認為false。設置為true，則出現瀏覽器自帶的滾動條，頁面滾動還是按頁滾動，但滾動條的默認行為也有效paddingTop/paddingBottom:
設置每一個section頂部和底部的padding，默認都是0。一般如果需要設置一個固定在頂部或者底部的菜單、導航、元素等，可以使用這兩個配置項。fixedElements:
固定的元素，默認為null，需要配置一個jquery選擇器。在頁面滾動的時候，fixedElements設置的元素固定不動。keyboardScrolling:
是否可以使用鍵盤方向鍵導航，默認為true。touchSensitivity:
在移動設備中滑動頁面的敏感性，默認為5，是按百分比來衡量，最高為100，越大滑動越難continuousVertical:
是否循環滾動，默認為false。如果為true，則頁面會循環滾動，它不會像loopTop和loopBottom那樣出現跳動。
（它和loopTop、loopBottom不兼容，不要同時設置）animateAnchor:
錨鏈接是否可以控制滾動動畫，默認為true。若為false，則通過錨鏈接定位到某個頁面顯示不再有動畫效果。-
recordHistory:
是否記錄歷史，默認true。可以記錄頁面滾動的歷史，通過瀏覽器的前進后退來導航。如果設置了autoScrolling:false，那么這個配置也將被關閉。
menu:
綁定菜單，設定的相關屬性與anchors的值對應后，菜單可以控制滾動，默認為false。可以設置為菜單的jquery選擇器。navigation:
是否顯示導航，默認false。若為true,會顯示小圓點作為導航navigationPosition:
導航小圓點的位置，可以設置為left或者right。navigationTooltips:
導航小圓點的tooltips設置，默認為[],注意按照順序設置。showActiveTooltip:
是否顯示當前頁面的導航的tooltip信息，默認為falseslidesNavigation:
是否顯示橫向幻燈片的導航，默認為falseslidesNavPosition:
橫向幻燈片導航的位置，默認為bottom，可以設置為top或bottomscrollOverflow:
內容超過滿屏后是否顯示滾動條，默認為false.若設置為true，則會顯示滾動條，如果要滾動查看內容，還需要jquery.slimscroll插件的配合。slimscroll插件主要用于模擬傳統的瀏覽器滾動條。sectionSelector:
section的選擇器，默認為.section。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類似。
