jQuery插件-fullpage全屏幻灯片展示效果

fullpage 全屏插件

全屏滚动效果，原生js也很好实现，主要是用 mousewheel 鼠标滚轮滚动事件， 来判断上滚动还是下滚动，之后设置每次滚动的高度为屏幕的高度即可。但是，虽然效果简单，但是兼容性很差，要做很多兼容处理及比较麻烦啦！

fullPage.js 是一个基于 jQuery 的插件，它能够帮你很方便、很轻松的制作出全屏网站。

fullPage.js 的诞生过程

早期作者要做拥有一个全屏幻灯片效果的网站，但是在网上搜索一番后，发现找不到相关代码示例，于是便打算自己动手实现。

没多久，网站完成了，作者又将这个功能从网站中抽离出来，做成了 jQuery 插件，以方便其他开发者集成使用。

当他将 jQuery 插件抽离出来之后，又将这份代码发布到了 GitHub，并简单做了下推广宣传。一周后，这个插件便在 GitHub 上累积数百个 Star，同时有许多开发者开始接入使用，并提交多个 issue，以帮助作者改进项目。

随着代码的迭代更新，插件功能也愈加完善，起初的 jQuery 插件也被重构成独立的 JavaScript 组件，并支持 Vue.js, React.js 和 Anugular 框架扩展，目前 WordPress 插件也已制作完成。

---

github 官网 https://github.com/alvarotrigo/fullPage.js

中文演示地址 http://www.dowebok.com/demo/2014/77/

---

主要功能有：

　　-支持鼠标滚动

　　-支持前进后退和键盘控制

　　-多个回调函数

　　-支持手机、平板触摸事件

　　-支持 CSS3 动画

　　-支持窗口缩放

　　-窗口缩放时自动调整

　　-可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

fullPage使用方法

1.引用库文件

从GitHub上下载下来压缩包解压出来找到dist文件夹，复制文件夹中的js,css文件到自己的项目中，需要注意的是因为这个是jQuery的插件所以也需要提前准备好jQuery文件放到自己的项目中。

引用文件-点击查看代码

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

2.HTML基本结构

点击查看代码

<div id="page">
        <div class="section">第一屏</div>
        <div class="section">第二屏</div>
        <div class="section">
            <div class="slide">第三屏的第一屏</div>
            <div class="slide">第三屏的第二屏</div>
            <div class="slide">第三屏的第三屏</div>
        </div>
    </div>

每个 section 代表一屏，默认显示“第一屏”，如果要指定加载页面时显示的“屏幕”，可以在对应的 section 加上 class=”active”，如：

<div class="section active">第三屏</div>
同时，可以在 section 内加入 slide，如：
<div id="page">
<div class="section">第一屏</div>
<div class="section">第二屏</div>
<div class="section">
<div class="slide">第三屏的第一屏</div>
<div class="slide">第三屏的第二屏</div>
<div class="slide">第三屏的第三屏</div>
</div>
</div>

3.js调用

点击查看代码

<script>
    $(function () {
        $('#page').fullpage({
            sectionsColor:['red'],
            afterLoad:function(anchorLink,index){
                console.log(index.index)
            }
        });
    });
</script>

插件参数及方法

1.选项

2.方法

3.回调函数

效果图