我們經常看過一些整屏翻頁的網站，看上去很高大上對於一些同學來說如果要原生的去開發可能還是有很大難度的。
今天我給大家介紹Fullpage插件，也能達到這一個效果。
下面我給同學們看下小米網站的這個頁面：http://www.mi.com/hongmi2a/
看過頁面之后就直接進入我們今天的主題吧！
1、一些必要的資源
1 2 3 //jquery 4 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 5 6 //fullpage插件 7 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.js"></script> 8 9 //滾動條插件 10 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/vendors/jquery.slimscroll.min.js"></script> 11 12 //fullpage.css 13 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.css">
2、頁面結構
1 <div id="fullpage"> 2 <div class='section'>第一頁</div> 3 <div class='section'>第二頁</div> 4 <div class='section'>第三頁</div> 5 <div class='section'>第四頁</div> 6 </div>
3、如果我們需要在一中又存在幻燈片效果，結構如下
<div class='section'> <div class='slide'>第一張幻燈片</div> <div class='slide'>第一張幻燈片</div> <div class='slide'>第一張幻燈片</div> </div>
這就是我們的一個簡單地頁面布局就完成了，現在只需要使用插件的api結構即可
4、插件的格式和用法：
1 $(function(){ 2 $('#fullpage').fullpage({ 3 //API接口 4 }) 5 })
5、部分API接口
1 //配置背景顏色 2 sectionsColor:['red','#f04','#9b0','#d3f'], 3 4 //配置幻燈片切換是否顯示箭頭，默認true 5 controlArrows:false, 6 7 //配置每頁內容頁面是否垂直居中，默認false 8 verticalCentered:true, 9 10 //配置文字是否隨着窗口變化而變化，默認false 11 resize:true, 12 13 //配置頁面滾動速度,默認700 14 scrollingSpeed:1000, 15 16 //配置錨鏈接，不應該和autoScrolling，scrollBar一起使用 17 anchors:['page1','page2','page3','page4'], 18 19 //配置錨點切換時候是否有過度動畫，默認true 20 animateAnchor:false, 21 22 //鎖定配置的錨鏈接是否顯示，默認false 23 lokAnchors:true, 24 25 //配置動畫由css3還是jquery來執行，默認true 26 css3:true, 27 28 //配置滾動到頂部之后是否從底部循環滾動，默認false 29 loopTop:true, 30 31 //相反從底部循環滾動，默認false 32 loopBottom:true, 33 34 //設置頁面是否循環滾動與loopTop，loopBottom不兼容,默認是false 35 continuousVertical:true, 36 37 //幻燈片是否循環滾動，默認true 38 loopHorizontal:false, 39 40 //配置是否按照插件的方式來進行滾動，默認true,和錨點不應該一起使用，一般不設置或者保持默認 41 autoScrolling:true, 42 43 //滾動的時候是否包含滾動條,默認false,和錨點不應該一起使用，一般不設置或者保持默認 44 scrollBar:false, 45 46 //配置頁面上下間距，默認0，如果需要設置固定頂部和頂部菜單導航配合使用 47 // paddingTop：'300px', 48 paddingBottom:0, 49 50 //配置頁面是否有固定的DOM 51 fixedElements:'#header', 52 53 //配置是否支持鍵盤方向鍵控制頁面切換，默認true 54 keyboardScrolling:true, 55 56 //配置是否激活瀏覽器前進后退功能，如果頁面設置了不按照插件的方式來滾動該配置也失效，默認true 57 recordHistory:true, 58 59 //配置菜單 60 menu:'#fullpageMenu', 61 62 //配置導航,位置，提示,顯示當前位置 63 navigation:true, 64 navigation:'right', 65 navigationTooltips:['page1','page2','page3','page4'], 66 showActiveTooltip:true, 67 68 //配置幻燈片是否顯示導航,和位置 69 slidesNavigation:true, 70 slidesNavPosition:'bottom', 71 72 //配置內容超過容器是否顯示滾動條，模式true, 73 scrollOverflow:true, 74 75 //修改section和幻燈片默認CLASS 76 sctionSelector: 77 slideSelector:
相信大家學習完之后又一些感覺了吧，再結合下面這個在線的小案例摸索一下！
案例：http://cdwanmeida.hk19.171host.com/test/fullpage.html
如果還有不明白的加我的微信或者在線留言即可謝謝！