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

Js如圖：



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


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