<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"/>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.fullPage.js" type="text/javascript" charset="utf-8"></script>

<ul id="fullpageMenu"><!--ul導(dǎo)航欄按鈕data-menuanchor為加載的頁(yè)面page-->
 <li data-menuanchor = "page1" class="active"><a href="#page1">section1</a></li>
 <li data-menuanchor = "page2"><a href="#page2">section2</a></li>
 <li data-menuanchor = "page3"><a href="#page3">section3</a></li>
 <li data-menuanchor = "page4"><a href="#page4">section4</a></li>
 </ul>
 <div id="fullpage"><!--div為容器，這里要用id名為fullpage-->
 <div class="section"><!--默認(rèn)的上下滾動(dòng)頁(yè)面，類名可改sectionSelector:".section"，不改默認(rèn)類名要為section-->
 <h1>這是第一屏</h1>
 </div>
 <div class="section">
 <div class="slide">幻燈片1</div><!--默認(rèn)的左右滾動(dòng)幻燈片，類名可改slideSelector:".slide"，不改默認(rèn)類名要為slide-->
 <div class="slide">幻燈片2</div>
 <div class="slide">幻燈片3</div>
 <div class="slide">幻燈片4</div>
 </div>
 <div class="section">
 <h1>這是第三屏</h1>
 </div>
 <div class="section">
 <h1>這是第四屏</h1>
 </div>
 </div>

<style type="text/css">
 *{
 margin: 0;
 padding: 0;
 }
 .slide{
 font-size: 60px;
 text-align: center;
 }
 #fullpageMenu{
 font-size: 30px;
 position: fixed;
 top: 0;
 z-index: 1;
 list-style: none;
 }
 #fullpageMenu li a{
 text-decoration: none;
 }
 #fullpageMenu li{
 background-color: mediumaquamarine;
 border: 1px solid black;
 padding: 8px;
 cursor: pointer;
 text-align: center;
 }
 #fullpageMenu li:hover{
 background-color: orange;
 }
 </style>

<script type="text/javascript">
 $(document).ready(function(){
 //配置項(xiàng)
 $("#fullpage").fullpage({
 //可以為每一個(gè)section設(shè)置background-color屬性
 sectionsColor:["green","orange","gray","red"],
 
 //定義是否通過箭頭來控制slide幻燈片，默認(rèn)為true。當(dāng)我們?cè)O(shè)置為false，則幻燈片左右兩則的箭頭就會(huì)消失，在移動(dòng)設(shè)備上，我們可以通過滑動(dòng)來操作幻燈片
 controlArrows:true,
 
 //每一頁(yè)的內(nèi)容是否垂直居中,默認(rèn)為true.一般保持默認(rèn)值
 verticalCentered:true,
 
 //滾動(dòng)速度，單位為毫秒，默認(rèn)為700
 scrollingSpeed:1000,
 
 //定義錨連接，默認(rèn)為[]。有了錨鏈接，用戶就可以快速打開定位到某一頁(yè)面
 //注意定義錨鏈接的時(shí)候，值不要和頁(yè)面中任意的id或name相同，尤其是在IE瀏覽器下。而且定義時(shí)不需要要加#
 anchors:["page1","page2","page3","page4"],
 
 //是否鎖定錨鏈接，默認(rèn)為false。如果設(shè)置為true，那么定義的錨鏈接，也就是anchors屬性則沒有效果。這個(gè)配置項(xiàng)使用的比較少
 lockAnchors:false,
 
 //定義頁(yè)面section滾動(dòng)的動(dòng)畫方式,如果修改此項(xiàng),需要引入jquery.easings插件，或者jquery ui
 easing:"easeInOutCubic",
 
 //是否使用CSS3 transforms 來實(shí)現(xiàn)滾動(dòng)效果，默認(rèn)為true。這個(gè)配置項(xiàng)可以提高支持css3的瀏覽器，比如移動(dòng)設(shè)備等的速度，如果瀏覽器不支持css3，則會(huì)使用jquery來替代css3實(shí)現(xiàn)滾動(dòng)效果
 css3:true,
 
 //滾動(dòng)到最頂部后是否連續(xù)滾動(dòng)到底部，默認(rèn)為false
 loopTop:false,
 
 //滾動(dòng)到最底部是否連續(xù)滾動(dòng)回頂部，默認(rèn)為false
 loopBottom:false,
 
 //橫向slider幻燈片是否循環(huán)滾動(dòng)，默認(rèn)為true
 loopHorizontal:true,
 
 //是否使用插件的滾動(dòng)方式，默認(rèn)為true，如果選擇false，則會(huì)出現(xiàn)瀏覽器自帶的滾動(dòng)條，將不會(huì)按頁(yè)滾動(dòng)，而是按照滾動(dòng)條的默認(rèn)行為來滾動(dòng)
 autoScrolling:true,
 
 //是否包含滾動(dòng)條，默認(rèn)為false，如果設(shè)置為true，則瀏覽器自帶的滾動(dòng)條出現(xiàn)，頁(yè)面滾動(dòng)時(shí)還是按頁(yè)滾動(dòng)，但是滾動(dòng)條的默認(rèn)行為也有效
 scrollBar:false,
 
 //設(shè)置每一個(gè)section頂部和底部的padding，默認(rèn)為0，一般如果需要設(shè)置一個(gè)固定頂部或者底部的菜單、導(dǎo)航、元素等，可以使用這兩個(gè)配置項(xiàng)
 paddingTop:0,
 paddingBottom:0,
 
 //固定的元素，默認(rèn)為null，需要配置一個(gè)jquery選擇器。在頁(yè)面滾動(dòng)的時(shí)候，fixedElements設(shè)置的元素固定不動(dòng)
 fixedElements:"",
 
 //是否可以使用鍵盤方向鍵導(dǎo)航，默認(rèn)為true
 keyboardScrolling:true,
 
 //在移動(dòng)設(shè)備中滑動(dòng)頁(yè)面的敏感性，默認(rèn)為5，是按百分比來衡量，最高為100,越大則越難滑動(dòng)
 touchSensitivity:5,
 
 //是否循環(huán)滾動(dòng)，默認(rèn)為false。如果設(shè)置為true，則頁(yè)面會(huì)循環(huán)滾動(dòng)，而不像loopTop或loopBottom那樣出現(xiàn)跳動(dòng)，注意這個(gè)屬性和這兩者不兼容，請(qǐng)不要同時(shí)使用
 continuousVertical:false,
 
 //錨鏈接是否可以控制滾動(dòng)動(dòng)畫，默認(rèn)為true。如果設(shè)置為false，則通過錨鏈接定位到某個(gè)頁(yè)面顯示不再有動(dòng)畫效果
 animateAnchor:true,
 
 //是否記錄歷史，默認(rèn)為true，可以記錄頁(yè)面滾動(dòng)的歷史，通過瀏覽器的前進(jìn)后退來導(dǎo)航。注意如果設(shè)置了autoScrolling:false,那么這個(gè)配置也將被關(guān)閉，即設(shè)置為false
 recordHistory:true,
 
 //綁定菜單,設(shè)定的相關(guān)屬性與anchors的值對(duì)應(yīng)后，菜單可以控制滾動(dòng)，默認(rèn)為false。可以設(shè)置為菜單的jquery選擇器
 menu:false,
 
 //是否顯示導(dǎo)航，默認(rèn)為false。如果設(shè)置為true，會(huì)顯示小圓點(diǎn)，作為導(dǎo)航
 navigation:true,
 
 //導(dǎo)航小圓點(diǎn)的位置，可以設(shè)置為left或者right
 navigationPosition:"right",
 
 //導(dǎo)航小圓點(diǎn)的tooltips設(shè)置，默認(rèn)為[]，注意按照順序設(shè)置
 navigationTooltips:["page1","page2","page3","page4"],
 
 //是否顯示當(dāng)前頁(yè)面的導(dǎo)航的tooltip信息，默認(rèn)為false
 showActiveTooltip:true,
 
 //是否顯示橫向幻燈片的導(dǎo)航，默認(rèn)為false
 slidesNavigation:true,
 
 //橫向幻燈片導(dǎo)航的位置，默認(rèn)為bottom，可以設(shè)置為top或bottom
 slidesNavPosition:"top",
 
 //內(nèi)容超過滿屏后是否顯示滾動(dòng)條，默認(rèn)為false。如果設(shè)置為true，則會(huì)顯示滾動(dòng)條，如果滾動(dòng)查看內(nèi)容，還需要jquery.slimscroll插件的配合
 scrollOverflow:false,
 
 //section的選擇器,默認(rèn)為.section
 sectionSelector:".section",
 
 //slideSelector:slide的選擇器，默認(rèn)為.slide
 slideSelector:".slide",
 });
 })
</script>

//方法函數(shù)
 $.fn.fullpage.xxx()//調(diào)用方法
 $.fn.fullpage.moveSectionUp();//向上滾動(dòng)一頁(yè)
 $.fn.fullpage.moveSectionDown();//向下滾動(dòng)一頁(yè)
 $.fn.fullpage.moveTo(section,slide);//滾動(dòng)到第幾頁(yè)，第幾個(gè)幻燈片，注意，頁(yè)面是從1開始，而幻燈片是從0開始
 $.fn.fullpage.silentMoveTo(section,slide);//滾動(dòng)到第幾頁(yè)，第幾個(gè)幻燈片和moveTo一樣，但是沒有動(dòng)畫效果
 $.fn.fullpage.moveSlideRight();//幻燈片向右滾動(dòng)
 $.fn.fullpage.moveSlideLeft();//幻燈片向左滾動(dòng)
 $.fn.fullpage.setAutoScrolling(Boolean);//動(dòng)態(tài)設(shè)置autoScrolling
 $.fn.fullpage.setLockAnchors(Boolean);//動(dòng)態(tài)設(shè)置lockAnchors
 $.fn.fullpage.setRecordHistory(Boolean);//動(dòng)態(tài)設(shè)置recordHistory
 $.fn.fullpage.setScrollingSpeed(milliseconds);//動(dòng)態(tài)設(shè)置scrollingSpeed
 $.fn.fullpage.destroy(type);//銷毀fullpage特效，type可以不寫，或者使用all，不寫type，fullpage給頁(yè)面添加的樣式和html元素還在如果使用all，則樣式、html等全部銷毀，頁(yè)面恢復(fù)和不使用fullpage相同的效果
 $.fn.fullpage.reBuild();//重新更新頁(yè)面和尺寸，用于通過ajax請(qǐng)求后改變了頁(yè)面結(jié)構(gòu)之后，重建效果