Fullpage.js是一個用于整屏切換的js插件，可以做出非常好看的頁面整屏切換效果。它主要功能有：1.支持鼠標滾動；2.支持前進后退和鍵盤控制；3.多個回調(diào)函數(shù)；4.支持手機、平板觸摸事件；5.支持 CSS3 動畫；6.支持窗口縮放；7.窗口縮放時自動調(diào)整；8.可設(shè)置滾動寬度、背景顏色、滾動速度、循環(huán)選項、回調(diào)、文本對齊方式等等。
使用需要先引入fullpage.css和fullpage.js，其兼容性除了IE8一下，其他主流瀏覽器都有較好的支持，大可放心使用。
Html結(jié)構(gòu)如下圖：

Js如圖：



Fullpage.js有需多參數(shù)來設(shè)置你需要的炫酷效果如圖：


還有許多方法來實現(xiàn)功能：
moveSectionUp()：向上滾動一個 section；
moveSectionDown()：向下滾動一個 section；
moveTo(section, slide)：將頁面滾動到目標 section 和滑動。section 從 1 開始，slide 從 0 開始。；
moveSlideRight()：將當前 slide 的水平滑塊滾動到下一張 slide ；
moveSlideLeft()：將當前 slide 的水平滑塊滾動到上一張 slide；
setAutoScrolling()：動態(tài)設(shè)置 autoScrolling 。 定義頁面滾動行為的方式。 如果設(shè)置為 true，則將使用"自動"滾動，否則將使用站點的"手動"或"正常"滾動；
setAllowScrolling()：添加或者禁止 fullpage 自動綁定的鼠標滑輪和移動觸摸事件；
setKeyboardScrolling()：添加或者禁止鍵盤對 section/slide 的控制（默認綁定）；
setScrollingSpeed()：定義以毫秒為單位的滾動速度；
回調(diào)函數(shù)功能：
afterLoad：滾動到某一屏后的回調(diào)函數(shù)，接收 anchorLink 和 index 兩個參數(shù)，anchorLink 是錨鏈接的名稱，index 是序號，從1開始計算。
onLeave：滾動前的回調(diào)函數(shù)，接收 index、nextIndex 和 direction 3個參數(shù)：index 是離開的“頁面”的序號，從1開始計算；nextIndex 是滾動到的“頁面”的序號，從1開始計算；direction 判斷往上滾動還是往下滾動，值是 up 或 down。
afterRender：頁面結(jié)構(gòu)生成后的回調(diào)函數(shù)，或者說頁面初始化完成后的回調(diào)函數(shù)。
afterSlideLoad：滾動到某一水平滑塊后的回調(diào)函數(shù)，與 afterLoad 類似，接收 anchorLink、index、slideIndex、direction 4個參數(shù)。
onSlideLeave：某一水平滑塊滾動前的回調(diào)函數(shù)，與 onLeave 類似，接收 anchorLink、index、slideIndex、direction 4個參數(shù)。