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

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