1. 简介
fullpage.js 是一个基于jQuery的全屏滚动插件，能帮助我们简单、快速创造出美观的全屏滚动网页，虽然用原生的JS也能实现（用mousewheel（非火狐浏览器支持的鼠标滚轮事件）和DOMMouseScroll(火狐浏览器支持的鼠标滚轮事件)，来判断鼠标滚轮的方向并执行相关操作，设置页面滚动的高度等于屏幕的高度即可），但原生JS实现的网页兼容性不太好。
github 官网 https://github.com/alvarotrigo/fullPage.js
官方网站（教程很详细）：http://fullpage.81hu.com/
可参考的fullpageAPI帮助文档：https://www.wenjiangs.com/doc/fullpage-start
主要功能包括：
1.支持鼠标滚动
2.支持前进后退和键盘控制
3.多个回调函数
4.支持手机、平板触摸事件
5.支持 CSS3 动画
6.支持窗口缩放
7.窗口缩放时自动调整
8.可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等。
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>
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>
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);）
| 名称 | 说明 |
|---|---|
| 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 可参考文档
https://blog.csdn.net/callbackpass/article/details/99961730