fullpage.js---全屏滚动插件

首先引用插件，jQuery,fullpage.css/fullpage.js

<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css">
<script type="text/javascript" src="jquery.fullPage.js"></script>

HTML代码：
section类为fullpage默认属性，必须加上；要想让某一屏在加载页面时显示，加active类

<div id="container">
        <!--screen 1-->
        <div class="section active">第一屏</div>
        <!--screen 2-->
        <div class="section">第二屏</div>
        <!--screen 3-->
        <div class="section">第三屏</div>
        <!--screen 4-->
        <div class="section">第四屏</div>
    </div>

CSS代码：
一些基本的样式，可根据实际情况修改

body,div,a,p,h2{
 margin:0;
 padding: 0;
 text-align: center;
 font-size: 50px
}
body{overflow: hidden;}

JS代码：
这里用了fullpage的方法fullpage(),sectionsColor、navigation为fullpage配置

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

这里是fullpage配置