fullPage.js的主要功能有：支持鼠標滾動、支持前進后退和鍵盤控制、多個回調函數(shù)、支持手機、平板觸摸事件、支持 CSS3 動畫、支持窗口縮放、窗口縮放時自動調整、可設置滾動寬度、背景顏色、滾動速度、循環(huán)選項、回調、文本對齊方式等等
使用說明
1、引入插件文件
這個插件依賴于jQuery，所以你還需要下載jQuery，并且在Fullpage插件之前引入。
如果你需要自定義頁面滾動的效果，你需要引入jquery.easings.min.js文件。
對于內容比較多的頁面，可以設置右側的滾動條，但是默認情況下無法滾動，你需要jquery.slimscroll.min.js文件來自定義滑條滾動效果。
最后，如果你不想下載到項目中，您可以使用開源項目CDN服務，F(xiàn)ullpage在CDNJS的地址：https://cdnjs.com/libraries/fullPage.js
2、編寫HTML代碼
默認情況下，每一屏幕的代碼都需要有DIV包裹，并且設置DIV的類名為section，默認情況下，第一個setion將作為首頁顯示在頁面上。
Some sectionSome sectionSome sectionSome section
假如你需要讓某一個section作為首頁的第一屏展示，你只需要給這個section添加一個active的類，F(xiàn)ullpage會自動優(yōu)先展示這個屏幕，例如定義下面的代碼：
Some section
Fullpage自帶左右滑動的幻燈片，只需要在section中添加DIV元素，并且給DIV元素添加slide類，F(xiàn)Ullpage會自動生成幻燈片特效，例如下面的代碼：
3、初始化Fullpage
使用jQuery的文檔加載完畢以后執(zhí)行函數(shù)，初始化Fullpage插件。
$(document).ready(function() {
$('#fullpage').fullpage();
});
所有的選項設置更復雜的初始化可能看起來像這樣：
$(document).ready(function() {
$('#fullpage').fullpage({
//Navigation
menu: false,//綁定菜單，設定的相關屬性與anchors的值對應后，菜單可以控制滾動，默認為false。
anchors:['firstPage', 'secondPage'],//anchors定義錨鏈接，默認為[]
lockAnchors: false,//是否鎖定錨鏈接，默認為false,設為true后鏈接地址不會改變
navigation: false,//是否顯示導航，默認為false
navigationPosition: 'right',//導航小圓點的位置
navigationTooltips: ['firstSlide', 'secondSlide'],//導航小圓點的提示
showActiveTooltip: false,//是否顯示當前頁面的tooltip信息
slidesNavigation: true,//是否顯示橫向幻燈片的導航，默認為false
slidesNavPosition: 'bottom',//橫向導航的位置，默認為bottom，可以設置為top或bottom
//Scrolling
css3: true,//是否使用CSS3 transforms來實現(xiàn)滾動效果，默認為true
scrollingSpeed: 700,//設置滾動速度，單位毫秒，默認700
autoScrolling: true,//是否使用插件的滾動方式，默認為true,若為false則會出現(xiàn)瀏覽器自帶滾動條
fitToSection: true,//設置是否自適應整個窗口的空間，默認值：true
scrollBar: false,//是否包含滾動條，默認為false,若為true瀏覽器自帶滾動條出現(xiàn)
easing: 'easeInOutCubic',//定義頁面section滾動的動畫方式，若修改此項需引入jquery.easing插件
easingcss3: 'ease',//定義頁面section滾動的過渡效果，若修改此項需引入第三方插件
loopBottom: false,//滾動到最低部后是否連續(xù)滾動到頂部，默認為false
loopTop: false,//滾動到最頂部后是否連續(xù)滾動到底部，默認為false
loopHorizontal: true,//橫向slide幻燈片是否循環(huán)滾動，默認為true
continuousVertical: false,//是否循環(huán)滾動，不兼容loopTop和loopBottom選項
normalScrollElements: '#element1, .element2',//避免自動滾動，滾動時的一些元素，例如百度地圖
scrollOverflow: false,//內容超過滿屏后是否顯示滾動條，true則顯示滾動條，若需滾動查看內容還需要jquery.slimscroll插件的配合
touchSensitivity: 15,//在移動設備中滑動頁面的敏感性，默認為5最高100，越大越難滑動
normalScrollElementTouchThreshold: 5,
//Accessibility
keyboardScrolling: true,//是否可以使用鍵盤方向鍵導航，默認為true
animateAnchor: true,//錨鏈接是否可以控制滾動動畫，默認為true,若為false則錨鏈接定位失效
recordHistory: true,//是否記錄歷史，默認為true,瀏覽器的前進后退可導航。若autoScrolling:false,那么這個屬性將被關閉
//Design
controlArrows: true,//定義是否通過箭頭來控制slide,默認true
verticalCentered: true,//定義每一頁的內容是否垂直居中，默認true
resize : false,//字體是否隨窗口縮放而縮放，默認false
sectionsColor : ['#ccc', '#fff'],//為每個section設置background-color屬性
paddingTop: '3em',設置每一個section頂部的padding,默認為0
paddingBottom: '10px',設置每一個section底部的padding,默認為0
fixedElements: '#header, .footer',固定元素，默認為null,需要配置一個jquery選擇器，在頁面滾動時，fixElements設置的元素不滾動
responsiveWidth: 0,
responsiveHeight: 0,
//Custom selectors
sectionSelector: '.section',//section選擇器。默認為.section
slideSelector: '.slide',//slide選擇器，默認為.slide
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
});
});