fullPage.js学习

发表于 | 分类于 | 0 comments

(一) fullPage.js插件

fullPage.js是基于JQuery的插件，因此在引入之前需要先引入jQuery

使用github官方地址引入最新版本
最新版本在文件夹dist中，可以打开文件夹，选择对应的jquery.fullpage.js(css)文件，在html中可直接如下引入：

1
2
3
4
5
6
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.
js"></script>
<script src = "https://rawgit.com/alvarotrigo/fullPage.js/master/dist/jquery.
fullpage.css"></script>
<script src = "https://rawgit.com/alvarotrigo/fullPage.js/master/dist/jquery.
fullpage.js"></script>

小技巧

在使用github原码时，一般在点击raw的时候的地址形如:
https://raw.githubusercontent.com/username/repository/branch/folder/file.
如果直接引入这个地址，应该会在console中报错为“js文件不是可执行的”
只需要把前面的raw.githubusercontent.com改成rawgit.com即可

从cdnjs引入固定版本

1
2
3
4
5
6
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax
/libs/fullPage.js/2.9.4/jquery.fullpage.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.
js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.
fullpage.js"></script>

当然，也可以自行下载js文件，直接从本地引入，这样就不需要担心自己在写网页的时候会遇到网络问题啦 ~> $\omega$ <~

(二) fullPage.js整体布局

fullPage.js的整体是由 section和slide构成的，竖直方向由section组成，横向方向由slide构成。

对于你想使用fullPage.js的网页的部分，你可以使用如下的结构：

1
2
3
4
5
6
7
8
9
10
<div id = "yourid">
    <div class = "section"> ...内容...  </div>
    <div class = "section">
        <div class="slide"> ...内容...</div>
        <div class="slide"> ...内容...</div>
        <div class="slide"> ...内容...</div>
    </div>
    <div class = "section"> ...内容...  </div>
    <div class = "section"> ...内容...  </div>
</div>

其中yourid可以指定你在网页的哪个部分使用fullPage.js，比如，你可以使用fullPage.js写一个滚动显示图片的部分。

在自己想使用fullPage.js的地方使用如上结构之后，在HTML中加入如下的script代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    $(document).ready(function(){
        $('#yourid').fullpage({
            //这里是一些配置项，这里我的配置项是为了能让页面自动滚动，并且头尾相接
            continuousVertical: true,
            afterRender: function(){
                setInterval(function(){
                    $.fn.fullpage.moveSectionDown();
                },8000);
            }
        });
    });
</script>

关于$('#yourid').fullpage()函数中使用的配置项， jQuery全屏滚动插件fullPage.js 一文中有详细说明，同时该文后也提供的在线演示： jQuery全屏滚动插件fullPage.js演示

(三)简单样例

下面是简单的使用fullPage.js实现自动循环滚动的样例。

See the Pen FullPage_Example by SimGuo (@SimGuo) on CodePen.

---------------- ♥ The End ♥ ----------------