FullPage.js全屏插件文档及使用方法

简介

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

下载地址

下载地址

相关示例：基于fullpage.js实现的360全屏滑动效果

支持功能

• 支持鼠标滚动
• 支持前进后退和键盘控制
• 多个回调函数
• 支持手机、平板触摸事件
• 支持 CSS3 动画
• 支持窗口缩放
• 窗口缩放时自动调整
• 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

使用方法

1、引入文件

<link rel="stylesheet" type="text/css" href="./fullPage.js-master/jquery.fullPage.css" />
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./fullPage.js-master/jquery.fullPage.min.js"></script>

2、HTML

<div id="fullpage">
    <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>

3、JS

<script type="text/javascript">
    $(function() {
        $("#fullpage").fullpage();
    });
</script>

4、循环演示 continuousVertical设置为true

$(function() {
    $("#ido").fullpage(
        {
            continuousVertical: true
        });
});

配置及方法

1、选项

2、方法

3、回调函数