依賴文件
<link rel="stylesheet" href="lib/jquery.fullPage.css">
<script src="lib/jquery.js"></script>
<script src="lib/jquery.fullPage.js"></script>
CDNJS 上提供的完整的 JavaScript庫列表http://cdnjs.com/
基本頁面結(jié)構(gòu)
<div id="fullpage">
<div class="section">
<div class="slide">第一頁第一屏</div>
<div class="slide">第一頁第二屏</div>
<div class="slide">第一頁第三屏</div>
<div class="slide">第一頁第四屏</div>
</div>
<div class="section">第二頁</div>
<div class="section">第三頁</div>
<div class="section">第四頁</div>
</div>
section豎向滾動猪勇，section內(nèi)的slide橫向滾動；section默認顯示第一頁
激活fullpage效果：
$(document).ready(function(){
$("#fullpage").fullpage();
})
fullpage基本配置項：
sectionsColor：為每個section設(shè)置背景色background-color
sectionsColor:["pink","green","blue","gray"]
controlArrows：定義是否通過箭頭控制slide幻燈片节视，默認true;設(shè)置為false則幻燈片左右兩側(cè)箭頭消失卸耘，移動設(shè)備上也可以通過滑動操作幻燈片坦辟。
verticalCentered：每一項內(nèi)容是否垂直居中诅岩，默認true;一般保持默認值
resize：字體是否隨著窗口縮放而縮放折柠，默認false
scrollingSpeed：滾動速度，單位毫秒批狐，默認700
anchors：定義錨鏈接，默認為[];定義錨鏈接時值不要和頁面中任意的id或name相同，尤其是在IE瀏覽器下鲸湃；而且定義時不要加#咐扭；錨鏈接會為每個section增加一個鏈接，顯示在地址欄中食零，不可重復(fù)困乒，與section一一對應(yīng)；定義錨鏈接后比如收藏時會直接定位到收藏的頁面;直接定位到某個頁面也可以通過給該section添加一個active類做到
anchors:["page1","page2","page3","page4"]
lockAnchors：是否鎖定錨鏈接贰谣，默認false娜搂；如果設(shè)置為true迁霎，定義的錨鏈接也就是anchors屬性則無效。該配置項使用的較少
easing：定義頁面section滾動的動畫方式百宇，默認為easeInOutCubic考廉，如果要修改此項，需引入jquery.easing插件或者jquery ui携御。
css3：是否使用css3 transforms來實現(xiàn)滾動效果昌粤，默認true；該配置項可以提高支持css3的瀏覽器比如移動設(shè)備等的速度啄刹，如果瀏覽器不支持css3則會使用jquery來替代css3實現(xiàn)滾動效果;chrome涮坐、firefox、360瀏覽器下設(shè)置為false則頁面不能滾動誓军。
loopTop：滾動到最頂部后是否連續(xù)滾動到底部袱讹，默認false
loopBottom：滾動到最低部后是否連續(xù)滾動回頂部，默認false
loopHorizontal：橫向slide幻燈片是否循環(huán)滾動谭企，默認為true
autoScrolling：是否使用插件的滾動方式廓译，默認true；如若設(shè)置為false則會出現(xiàn)瀏覽器自帶的滾動條债查，將不會按頁滾動非区，而是按照滾動條的默認行為來滾動。
scrollBar：是否包含滾動條盹廷，默認false征绸；若設(shè)置為true則瀏覽器自帶的滾動條出現(xiàn)，頁面滾動時還是按頁滾動俄占，但是滾動條的默認行為也有效
autoScrolling和scrollBar同時設(shè)置為true管怠，則頁面不能滾動
autoScrolling和scrollBar同時設(shè)置為false，則頁面出現(xiàn)滾動條缸榄，按照滾動條的默認行為來滾動
autoScrolling:false 同時scrollBar:true,頁面出現(xiàn)滾動條渤弛，按照滾動條的默認行為來滾動
paddingTop/paddingBottom:設(shè)置每一個section頂部和底部的padding，默認都是0甚带；一般如果要設(shè)置一個固定在頂部或者底部的菜單她肯、導(dǎo)航、元素等時鹰贵，可以使用這兩個配置項晴氨。
paddingTop:"20px",
paddingBottom:"20px"
fixedElements：固定的元素，默認為null碉输，需配置一個jquery選擇器籽前；在頁面滾動時fixedElements設(shè)置的元素固定不動。
注意：配置了該項的同時需給元素寫固定定位的樣式；如果不配置該項枝哄，而是只給#fullpage外需固定定位的元素寫固定定位的樣式肄梨，該元素在頁面滾動過程中會被覆蓋掉（若想不被覆蓋掉，可以給z-index設(shè)置一個很大的值膘格，如z-index:1000)峭范。
<div id="header">header</div>
<div id="fullpage">
<div class="section">
<h1>第一頁</h1>
</div>
<div class="section">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
</div>
<div class="section">第三頁</div>
</div>
#header{
height: 50px;
width: 100%;
line-height:50px;
font-size:24px;
background:red;
position:fixed;
top:20px;
}
同時設(shè)置
fixedElements:"#header"
僅僅寫css可以達成上述效果,如：
#header{
height: 50px;
width: 100%;
line-height:50px;
font-size:24px;
background:red;
position:fixed;
top:20px;
z-index:1000;
}
keyboardScrolling：是否可使用鍵盤方向鍵導(dǎo)航，默認true
touchSensitivity：在移動設(shè)備中滑動頁面的敏感性瘪贱，默認5纱控，按百分比衡量，最高100菜秦，越大則越難滑動甜害。
continuousVertical：是否循壞滾動，默認false;若設(shè)置為true球昨，則頁面會順滑地循環(huán)滾動尔店，而不是像loopTop或loopBottom那樣出現(xiàn)跳動。++這個屬性和loopTop\loopBottom不兼容主慰，不要同時設(shè)置嚣州；若scrollBar設(shè)置為true則也不兼容，頁面不能滾動++
animateAnchor：錨鏈接是否可以控制滾動動畫共螺，默認true该肴；若設(shè)置為false，則通過錨鏈接定位到某個頁面顯示不再有動畫效果藐不。
recordHistory：是否記錄歷史匀哄，默認true，可記錄頁面滾動的歷史雏蛮，通過瀏覽器的前進后退來導(dǎo)航涎嚼；若設(shè)置了autoScrolling:false，那么這個配置也將被關(guān)閉挑秉，即設(shè)置為false法梯。
menu：綁定菜單，設(shè)定相關(guān)屬性與anchors的值對應(yīng)后犀概，菜單可以控制滾動立哑，默認為false≮逡保可以設(shè)置為菜單的jquery選擇器。例：
<ul id="fullpageMenu">
<li data-menuanchor="page1" class="active">
<a href="#page1">1 section</a>
</li>
<li data-menuanchor="page2">
<a href="#page2">2 section</a>
</li>
<li data-menuanchor="page3">
<a href="#page3">3 section</a>
</li>
<li data-menuanchor="page4">
<a href="#page4">4 section</a>
</li>
</ul>
<div id="fullpage">
<div class="section">第一頁</div>
<div class="section">第二頁</div>
<div class="section">第三頁</div>
<div class="section">第四頁</div>
</div>
css
<!--將ul固定在頁面頂部-->
ul{
position:fixed;
top:0;
right:0;
left:0;
height: 50px;
background:#fff;
color:#000;
z-index:1000;
list-style:none;
margin:0;
padding:0;
}
ul li{
width: 25%;
height: 50px;
line-height: 50px;
float:left;
font-size:12px;
vertical-align:center;
}
配置項：
anchors:["page1","page2","page3","page4"],
menu:"#fullpageMenu"
navigation：是否顯示導(dǎo)航滥嘴，默認false木蹬；如果設(shè)置為true,會顯示小圓點作為導(dǎo)航。
navigationPosition==：導(dǎo)航小圓點的位置，可設(shè)置為left或right;默認right镊叁。
navigationTooltips：導(dǎo)航小圓點的tooltips設(shè)置尘颓，默認為[]，注意按照順序設(shè)置晦譬。（鼠標點擊小圓點時會顯示什么文字）
showActiveTooltip：是否顯示當(dāng)前頁面的導(dǎo)航的tooltip信息疤苹，默認false。
slidesNavigation：是否顯示橫向幻燈片slide的導(dǎo)航敛腌，默認false卧土。
slidesNavPosition：橫向幻燈片slide導(dǎo)航的位置，默認為bottom,可以設(shè)置為top或bottom像樊。
scrollOverflow：內(nèi)容超過滿屏后是否顯示滾動條尤莺，默認false。如果設(shè)置為true生棍，則會顯示滾動條颤霎，如果要滾動查看內(nèi)容，還需要jquery.slimscroll插件的配合涂滴。slimscroll插件主要用于模擬傳統(tǒng)的瀏覽器滾動條友酱。
sectionSelector：section的選擇器，默認.section柔纵。
slideSelector：slide的選擇器缔杉，默認.slide。
方法：
$.fn.fullpage.方法名稱()
moveSectionUp()：向上滾動一頁首量。
moveSectionDown()：向下滾動一頁壮吩。
moveTo(section,slide)：滾動到第幾頁第幾張幻燈片（參數(shù)為整數(shù)，頁面從1開始加缘，幻燈片從0開始）鸭叙。
silentMoveTo(section,slide)：和moveTo(section,slide)一樣，但是沒有動畫效果拣宏。
moveSlideRight()：幻燈片向右滾動沈贝。
moveSlideLeft()：幻燈片向左滾動。
setAutoScrolling(boolean)：動態(tài)設(shè)置autoScrolling
setLockAnchors(boolean)：動態(tài)設(shè)置lockAnchors
setRecordHistory(boolean)：動態(tài)設(shè)置recordHistory
setScrollingSpeed(milliseconds)：動態(tài)設(shè)置scrollingSpeed
setAllowScrolling(boolean,[directions])：添加或刪除鼠標/滑動控制勋乾；第一個參數(shù)為true時啟用宋下，false禁用；后面的參數(shù)為方向辑莫，取值包含all学歧、up、down各吨、left枝笨、right，可以使用多個，用逗號分隔横浑。（比如在做有獎問答頁面時剔桨，提問的問題在前面的頁面有答案，當(dāng)滾動到最后一頁時不希望用戶再滾動回之前的頁面查看答案徙融，就可以使用這種方法）
destroy(type)：銷毀fullpage特效洒缀，type可以不寫，或者使用all欺冀；不寫type树绩，fullpage給頁面添加的樣式和html元素還在；如果使用all脚猾，則樣式葱峡、html等全部銷毀，頁面恢復(fù)和不使用fullpage相同的效果龙助。
reBuild()：重新更新頁面和尺寸砰奕，用于通過ajax請求后改變了頁面結(jié)構(gòu)之后，重建效果提鸟。
lazy loading
<img data-src="image.png" alt="">
<video data-src="video.webm"></video>
<video data-src="video.webm"></video>
通過把src換為data-src實現(xiàn)军援。
fullpage回調(diào)函數(shù)
afterLoad(anchorLink,index)：滾動到某一屏后（滾動結(jié)束后）的回調(diào)函數(shù)，接收 anchorLink 和 index 兩個參數(shù)称勋，anchorLink 是錨鏈接的名稱胸哥，index 是序號，從1開始計算赡鲜。
onLeave(index,nextIndex,direction)：離開一個section時會觸發(fā)一次該回調(diào)函數(shù)空厌。index 是離開的“頁面”的序號，從1開始計算银酬；
nextIndex 是滾動到的“頁面”的序號嘲更，從1開始計算；direction 判斷往上滾動還是往下滾動揩瞪，值是 up 或 down赋朦。
通過return false可以取消滾動。
afterRender()：頁面結(jié)構(gòu)生成后的回調(diào)函數(shù)李破，或者說頁面初始化完成后的回調(diào)函數(shù)宠哄。
afterResize()：瀏覽器窗口尺寸改變后的回調(diào)函數(shù)。
afterSlideLoad(anchorLink,index,slideIndex,direction)：滾動到某一水平滑塊后的回調(diào)函數(shù)嗤攻，與 afterLoad 類似毛嫉。
onSlideLeave(anchorLink,index,slideIndex,direction)：離開一個slide時會觸發(fā)一次該回調(diào)函數(shù)，和onLeave類似妇菱。
onSlideLeave:function(page2,slide2,slide3,left){
console.log("sss")
}
