fullPage全屏滚动插件【超简单教程】以及报错licenseKey和不够一屏的解决方案

fullPage.js滚屏插件可以说是目前使用的最广泛的滚屏插件了，不管是兼容性还是稳定性，都做的很好了，下面我们快速入门运用这个插件吧。

【超简单教程】

1、引入对应的本地的或者是CDN的css和js插件【官方插件地址】

<link rel="stylesheet" href="./jquery.fullPage.min.css">
<script src="./jquery.fullPage.min.js"></script>

注意：

一、引用插件的时候，css和js的版本必须一致，否则会有一些报错或者问题出现。

二、CDN引用官方插件的时候，会报下面的错，因为官方是默认需要你的代码开源然后找他们要密钥或者购买才能使用。

解决方案：我们可以下载没有被压缩的版本，然后修改fullpage.js下面的displayWarnings()方法中的代码就可以解决了。

2、在需要滚屏的标签上面添加class="section"，最后不够一屏的，class添加fp-auto-height就可以了。

<div id="index">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">第三屏</div>
    <div class="section fp-auto-height">最后一屏</div>
</div>

3、在js中进行方法的初始化调用。

new fullpage('#index', {
    scrollingSpeed: 800, //滚动的时间
    afterLoad: function(origin) {
        console.log(origin.index);//判断滚动到第几屏
    }
});

git的我的dome代码地址：https://github.com/shijianfeishi/fullpage.js

gif官方地址：https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese#fullpagejs