H5插件 fullpage全屏滚动插件使用帮助

H5，css3 为我们提供了很多强大的功能，我觉得最为突出就是，通过Css3的一个动画效果，为我们在js中节省了很多代码，和时间。本次我向大家介绍一个好用的小插件，实现全屏滚动的 fullpage

1、插件下载地址

我这里已经为大家准备好的我之前使用的版本  

注意： 因为fullpage是基于jquery的 所以需要jquery.js. 我已经打包好地址在下
三个文件 一个js 一个css 一个jq

链接：https://pan.baidu.com/s/1AnvKMbUlWQMWXlqJ_wpKww 提取码：f0mx

2、引入依赖包

  这里注意在引入时先引入jq  ，在引入我们的fullpage

3、我们在自建js文件中引入

我们基于此段代码进行填充

					 $(function(){
                         $('#dowebok').fullpage();
                     });

4、在html中搭建此结构

<!-- 每个section是一个竖屏幕，slide则为一个屏幕中横屏-->
 <div id="dowebok">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
    </div>
    <div class="section">第四屏</div>
</div>

5、我整理的fullpage常用方法

 $('.dowebok').fullpage({
        /*背景颜色配置参数 有多少屏我们可以加入自己喜欢的颜色*/
        sectionsColor: ["#fadd67", "#84a2d4", "#ef674d"],
        /*是否允许内容居中，默认是true*/
        verticalCentered: false,
        /*这个是右边的一个点型导航栏，fullpage自带的默认不打开*/
        navigation: true,
        /*当进入某一屏时触发，我这里给他触发加入的是now类*/
        afterLoad:function (link,index) {
            /*index 序号 1开始  当前屏的序号*/
            $('.section').eq(index-1).addClass('now');
        },
        /*离开某一个页面的时候触发，我加入的是leaved类   index当前页  nextIndex下一页*/
        onLeave:function (index,nextIndex,direction) {
            if(index == 2 && nextIndex == 3){
                /*当前是从第二页到第三页*/
                $('.section').eq(index-1).addClass('leaved');
            }
        },
        /*页面切换的时间 默认是700mm*/
        scrollingSpeed:1000
    });

本人也是对此浅显研究了一下，如果有更好的，或者有别的建议可以加我QQ2607143474，大家一起探讨技术