jQuery全屏滾動插件fullPage使用

1. 引入jquery.js和jquery.fullPage.min.js

<script src="jquery.min.js"></script>
<script src="chajian/jquery.fullPage.min.js"></script>

2. 書寫html

<div id="dowebok">
    <div class="section section1">
        <h3>第一屏</h3>
        <p>fullPage.js — 回調函數演示</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>

3. 編寫樣式

.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}

4. 書寫js

$(function(){
       $('#dowebok').fullpage({
       sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']
    })
})