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']
    })
})