前端小记
sweetheart
2020-10-31
目录

fullpage全屏滚动轮播插件的使用

# 1. 简介

fullpage.js 是一个基于 jQuery 的全屏滚动插件，能帮助我们简单、快速创造出美观的全屏滚动网页，虽然用原生的 JS 也能实现（用 mousewheel（非火狐浏览器支持的鼠标滚轮事件）和 DOMMouseScroll(火狐浏览器支持的鼠标滚轮事件)，来判断鼠标滚轮的方向并执行相关操作，设置页面滚动的高度等于屏幕的高度即可），但原生 JS 实现的网页兼容性不太好。

主要功能包括：

    1.支持鼠标滚动

    2.支持前进后退和键盘控制

    3.多个回调函数

    4.支持手机、平板触摸事件

    5.支持 CSS3 动画

    6.支持窗口缩放

    7.窗口缩放时自动调整

    8.可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 2.使用说明

# 2.1 引入插件文件

    <!-- 因为fullpage插件依赖于jQuery(1.7以上版本)，所以需要下载jQuery，并在fullpage插件之前引入。fullpage3.x版本已经摒弃了对jQuery的依赖，但对ie8及以下浏览器不兼容 -->
    <link rel="stylesheet" type="text/css" href="/fullpage/jquery.fullPage.css" />
    <script src="/fullpage/jquery.min.js"></script>
    <script type="text/javascript" src="/fullpage/jquery.fullPage.js"></script>

    <!-- 如果需要自定义页面滚动的效果，需要引入jquery.easings.min.js文件 -->
    <script src="/fullpage/jquery.easings.min.js"></script>
    <!-- 如果需要自定义滑条滚动效果，需要引入需要jquery.slimscroll.min.js文件来自定义滑条滚动效果 -->
    <script type="text/javascript" src="/fullpage/jquery.slimscroll.min.js"></script>
        <!--也可以通过CDN 引入（测试练习可以使用，但在项目中建议不要使用CDN引入文件，会导致项目受制于引入的链接，如果引入CDN链接失效，项目会崩溃，请谨慎使用）-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.js"></script>
        <!-- 自定义页面滚动的效果 -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

        <!-- 自定义滑条滚动效果 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 2.2 示例代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- 可以通过CDN 引入（测试练习可以使用，但在项目中建议不要使用CDN引入文件，会导致项目受制于引入的链接，如果引入CDN链接失效，项目会崩溃，请谨慎使用)-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.js"></script>
        <!-- 自定义页面滚动的效果 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
    <!-- 自定义滑条滚动效果 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>

    <title>fullpage插件测试练习</title>
    <style>
        .section {
            text-align: center;
            font: 50px "Microsoft Yahei";
            color: #fba;
            background: #bbffaa;
        }

        .section p {
            font: 30px "Microsoft Yahei";
        }
    </style>
    </head>

    <body>
        <div id="fullpage">
            <!-- 如果需要让某一个section作为首页的第一屏展示，只需要给这个section添加一个active的类，Fullpage会自动优先展示这个屏幕 -->
            <div class="section active">
                <!-- 只需要在section中添加DIV元素，并且给DIV元素添加slide类，FUllpage会自动生成左右滑动的幻灯片特效 -->
                <div class="slide">
                    横向第一屏
                </div>
                <div class="slide"> 横向第二屏</div>
                <div class="slide"> 横向第三屏 </div>
                <div class="slide"> 横向第四屏</div>
            </div>
            　　<div class="section">第二屏</div>
            　　<div class="section">第三屏</div>
            　　<div class="section">第四屏</div>
            　　<div class="section">第五屏</div>
        </div>
    </body>
        <script>
            // 初始化fullpage
            $(function () {
                $('#fullpage').fullpage({
                    // slidesNavigation: true,//是否显示横向幻灯片的导航，默认为false
                    slidesNavPosition: 'top',//横向导航的位置，默认为bottom，可以设置为top或bottom
                    navigation: true,//是否显示导航，默认为false
                    navigationPosition: 'left',//导航小圆点的位置
                });
            });　　
        </script>
    </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

# 2.3 效果展示

# 2.4 选项参数

选项类型默认值说明
verticalCentered字符串true内容是否垂直居中
resize布尔值false字体是否随着窗口缩放而缩放
sectionColor函数无设置背景颜色
anchors数组无定义锚链接
scrollingSpeed整数700滚动速度，单位为毫秒
easing字符串easeInQuart滚动动画方式
menu布尔值false绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动
navigation布尔值false是否显示项目导航
navigationPosition字符串right项目导航的位置，可选 left 或 right
navigationTooltips数组空项目导航的 tip
slidesNavigation布尔值false是否显示左右滑块的项目导航
slidesNavPosition字符串bottom左右滑块的项目导航的位置，可选 top 或 bottom
controlArrowColor字符串#fff左右滑块的箭头的背景颜色
loopBottom布尔值false滚动到最底部后是否滚回顶部
loopTop布尔值false滚动到最顶部后是否滚底部
loopHorizontal布尔值true左右滑块是否循环滑动
autoScrolling布尔值true是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条
scrollOverflow布尔值false内容超过满屏后是否显示滚动条
css3布尔值false是否使用 CSS3 transforms 滚动
paddingTop字符串0与顶部的距离
paddingBottom字符串0与底部距离
fixedElements字符串无
normalScrollElements无
keyboardScrolling布尔值true是否使用键盘方向键导航
touchSensitivity整数5
continuousVertical布尔值false是否循环滚动，与 loopTop 及 loopBottom 不兼容
animateAnchor布尔值true
normalScrollElementTouchThreshold整数5

# 2.5 方法（调用时需要使用$.fn.fullpage，例如 $.fn.fullpage.moveTo(1); 或者 fullpage_api.getActiveSection(); 或者先通过 fullpage = new fullpage('#fullpage', { 。。。}来实例化 fullpage 对象，再通过 fullpage. .moveTo(1);来调用相关方法）

     //方式一
     // fullpage插件的事件
    fullpage = new fullpage('#fullpage', {

    }
    //在fullpage函数外调用方法
      fullpage.moveTo(index + 1)
      fullpage.reBuild()


     //方式二：全局变量使用
     // fullpage插件的事件
    $(document).ready(function() {
    $('#fullpage').fullpage({
    	//options here
    	autoScrolling:true,
    	scrollHorizontally: true
    });

    //methods
    $.fn.fullpage.setAllowScrolling(false);
    });
      $.fn.fullpage.reBuild();


    //方式三
    new fullpage('#fullpage', {
    //options here
    autoScrolling:true,
    scrollHorizontally: true
    });

    //methods
    fullpage_api.setAllowScrolling(false);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
名称说明
moveSectionUp()向上滚动
moveSectionDown()向下滚动
moveTo(section, slide)滚动到
moveSlideRight()slide 向右滚动
moveSlideLeft()slide 向左滚动
setAutoScrolling()设置页面滚动方式，设置为 true 时自动滚动
setAllowScrolling()添加或删除鼠标滚轮/触控板控制
setKeyboardScrolling()添加或删除键盘方向键控制
setScrollingSpeed()定义以毫秒为单位的滚动速度

# 2.6 回调函数

名称说明
afterLoad滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算
onLeave滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算；nextIndex 是滚动到的“页面”的序号，从1开始计算；direction 判断往上滚动还是往下滚动，值是 up 或 down。
afterRender页面结构生成后的回调函数，或者说页面初始化完成后的回调函数
afterSlideLoad滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数
onSlideLeave某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数

# 2.7 可参考文档

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

官方网站（教程很详细）：http://fullpage.81hu.com/

可参考的 fullpageAPI 帮助文档：https://www.wenjiangs.com/doc/fullpage-start

部分博客：

https://blog.csdn.net/callbackpass/article/details/99961730

https://www.cnblogs.com/eer123/p/8039827.html

http://fullpage.81hu.com/

完善页面 (opens new window)
上次更新: 2024-11-28 17:23:47
网站由http协议更改为https协议的方法
svn的简单使用

← svn的简单使用→

最近更新
01
git常用操作手册
12-26
02
常用的前端工具库
12-19
03
前端构建工具
12-19
更多文章>
前端小记 版权所有 | Copyright © 2021-2024