jquery.fullPage.js全屏滾動插件教程演示

css部分（此處須要導入jquery.fullPage.css）

 <style>
        .section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
        .section2 p { position: relative; left: -120%;}
        .section3 p { position: relative; bottom: -120%;}
        .section4 p { display: none;}
    </style>

html部分

<div id="dowebok">
    <div class="section section1">
        <h3>第一屏</h3>
        <p>回調函數</p>
    </div>
    <div class="section section2">
        <h3>第二屏</h3>
        <p>滾動到第二屏後的回調函數執行的效果</p>
    </div>
    <div class="section section3">
        <h3>第三屏</h3>
        <p>滾動到第三屏後的回調函數執行的效果</p>
    </div>
    <div class="section section4">
        <h3>第四屏</h3>
        <p>滾動到第四屏後的回調函數執行的效果</p>
    </div>
</div>

js部分（此處須要導入jquery.fullPage.min.js）

    <script>
        $(function(){
            $('#dowebok').fullpage({
                sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],//幾個模塊的顏色
                continuousVertical: true,
                'navigation': true,
                afterLoad: function(anchorLink, index){
                    if(index == 1){
                        console.log("1")
                    }
                    if(index == 2){
                        console.log("2")
                    }
                    if(index == 3){
                        console.log("3")
                    }
                    if(index == 4){
                        console.log("4")
                    }
                }
            });
            setInterval(function(){
                $.fn.fullpage.moveSectionDown();
            }, 3000);//循環執行
        });
    </script>

API說明

jQuery全屏滾動插件fullPage.js演示
fullPage.js支持IE8+及其餘主流瀏覽器
兼容 jQuery 1.7+


fullPage.js 是一個基於 jQuery 的插件，它可以很方便、很輕鬆的製做出全屏網站，主要功能有：
支持鼠標滾動
支持前進後退和鍵盤控制
多個回調函數
支持手機、平板觸摸事件
支持 CSS3 動畫
支持窗口縮放
窗口縮放時自動調整
可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等等

配置 
1、選項

選項 類型 默認值 說明

verticalCentered                    字符串               true                內容是否垂直居中
resize                              布爾值               false               字體是否隨着窗口縮放而縮放
slidesColor                         函數                  無           　　  設置背景顏色
anchors                             數組                  無           　　  定義錨連接
scrollingSpeed                      整數                  700           　　 滾動速度，單位爲毫秒
easing                              字符串               easeInQuart         滾動動畫方式
menu                                布爾值               false               綁定菜單，設定的相關屬性與 anchors 的值對應後，菜單能夠控制滾動
navigation                          布爾值               false               是否顯示項目導航
navigationPosition                  字符串               right               項目導航的位置，可選 left 或 right
navigationColor                     字符串               #000                項目導航的顏色
navigationTooltips                  數組                  空                 項目導航的 tip
slidesNavigation                    布爾值               false               是否顯示左右滑塊的項目導航
slidesNavPosition                   字符串               bottom           　　左右滑塊的項目導航的位置，可選 top 或 bottom
controlArrowColor                   字符串               #fff                左右滑塊的箭頭的背景顏色
loopBottom                          布爾值               false           　　 滾動到最底部後是否滾回頂部
loopTop                             布爾值               false           　　 滾動到最頂部後是否滾底部
loopHorizontal                      布爾值               true                左右滑塊是否循環滑動
autoScrolling                       布爾值               true                是否使用插件的滾動方式，若是選擇 false，則會出現瀏覽器自帶的滾動條
scrollOverflow                      布爾值               false           　　 內容超過滿屏後是否顯示滾動條
css3                                布爾值               false           　　 是否使用 CSS3 transforms 滾動
paddingTop                          字符串               0               　　 與頂部的距離
paddingBottom                       字符串               0               　　 與底部距離
fixedElements                       字符串               無
normalScrollElements                                    無
keyboardScrolling                   布爾值               true                是否使用鍵盤方向鍵導航
touchSensitivity                    整數                  5
continuousVertical                  布爾值               false           　　 是否循環滾動，與 loopTop 及 loopBottom 不兼容
animateAnchor                       布爾值               true
normalScrollElementTouchThreshold   整數                  5

2、方法

名稱 說明

moveSectionUp()                      向上滾動
moveSectionDown()                    向下滾動
moveTo(section, slide)               滾動到
moveSlideRight()                     slide 向右滾動
moveSlideLeft()                      slide 向左滾動
setAutoScrolling()                   設置頁面滾動方式，設置爲 true 時自動滾動
setAllowScrolling()                  添加或刪除鼠標滾輪/觸控板控制
setKeyboardScrolling()               添加或刪除鍵盤方向鍵控制
setScrollingSpeed()                  定義以毫秒爲單位的滾動速度

3、回調函數 名稱 說明
afterLoad                           滾動到某一屏後的回調函數，接收 anchorLink 和 index 兩個參數，anchorLink 是錨連接的名稱，index 是序號，從1開始計算
onLeave                             滾動前的回調函數，接收 index、nextIndex 和 direction 3個參數：index 是離開的「頁面」的序號，從1開始計算；
nextIndex                           是滾動到的「頁面」的序號，從1開始計算；
direction                           判斷往上滾動仍是往下滾動，值是 up 或 down。
afterRender                         頁面結構生成後的回調函數，或者說頁面初始化完成後的回調函數
afterSlideLoad                      滾動到某一水平滑塊後的回調函數，與 afterLoad 相似，接收 anchorLink、index、slideIndex、direction 4個參數
onSlideLeave                        某一水平滑塊滾動前的回調函數，與 onLeave 相似，接收 anchorLink、index、slideIndex、direction 4個參數