全屏滚动fullpage.js

目前很多网站都会有全屏滚动的效果，比如京东的楼梯效果，很多网页我们看到的可以通过点击导航定位到具体的一屏的这样的效果，很多官网也会有这样的效果出现，最近我也做了一个需要全屏滚动效果的官网

1：当鼠标滑动到具体一屏的时候对应的导航显示，整屏滑动，给每一屏有需要的添加动画效果~

2：下面就介绍一下fullpage.js这个插件啦，

<script src="js/jquery.js"></script>
// fullpage.js是基于jq 插件所以要放在jq的后面
<script src="js/fullpage.js">
具体使用方法，很多属性更具需求来添加
$(function(){
$('#fullpage').fullpage({
    navigation:'true',
    scrollingSpeed:'700',
    navigationPosition:'left',
    navigationColor:'#ff4242',
    anchors:['page1','page2','page3','page4'],
    menu:'#menu',
    css3:'true',
    easingcss3:'ease',
    easing:'easeInOutCubic',
afterRender:function(){
    
},
 afterLoad:function(anchorLink,index){
    var indexs=index.index;
}
})
})

//html部分

//导航
<ul id="menu">
    <li data-menuanchor="page1" class="actice">
    <a href="#page1">111</a>    
    </li>
    <li data-menuanchor="page2">
    <a href="#page2">222</a>   
    </li>
    <li data-menuanchor="page3" class="actice">
    <a href="#page3">333</a>    
    </li>
    <li data-menuanchor="page4">
    <a href="#page4">444</a>   
    </li>

</ul>
<div class="section">
    第一屏
</div>
<div class="section">
    第二屏
</div>
<div class="section">
    第三屏
</div>
<div class="section">
    第四屏
</div>

更改导航小按钮的颜色的时候，颜色不容易被改掉，可以这样去做
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span {
    width:9px !important;
    height:9px !important;
    margin:-6px 0 0 -4px !important;
    background: #FF683F !important; /*这里设置的是活动导航的颜色*/
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    background: #fff !important;
    border: 1px solid #fff;/*这里设置的是非活动导航的颜色*/
}

滑动到每一屏的时候导航对应，可以给加样式 "active"