**全屏分页插件fullpage.js详解**
全屏分页是一种常见的网页设计技术，它将网站的内容以全屏的方式展示，每个页面代表一个独立的内容区域，用户通过滚动或点击导航来浏览不同的页面。fullpage.js是一款强大的JavaScript插件，专为实现这种效果而设计，它提供了丰富的选项和定制能力，使得创建美观且交互性强的全屏滚动网站变得简单易行。
### 1. fullpage.js基本概念
- **分页**：在fullpage.js中，每个全屏视图称为一个“段落”（section），每个段落可以包含多个“滑块”（slide）。段落和滑块的组合构建了全屏分页的结构。
- **滚动控制**：fullpage.js自动接管了浏览器的滚动行为，使得用户可以通过鼠标滚轮、键盘或者触摸设备平滑地在各个段落间切换。
- **导航**：插件会自动生成导航条，显示当前段落和滑块的位置，用户可以通过导航快速跳转到目标位置。
### 2. fullpage.js安装与初始化
你需要在HTML文件中引入fullpage.js的CSS和JavaScript文件。然后，使用`new fullPage.js()`进行初始化，指定容器元素（通常为body）和配置选项。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<link rel="stylesheet" type="text/css" href="path/to/fullpage.css">
</head>
<body>
<div id="fullpage">
<!-- 这里添加你的段落和滑块 -->
</div>
<script src="path/to/jquery.min.js"></script>
<script src="path/to/fullpage.js"></script>
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
// 配置选项
});
});
</script>
</body>
</html>
```
### 3. 段落与滑块的结构
- **段落（section）**：使用`<div class="section">`定义，每个段落代表全屏的一个页面。你可以添加任何HTML元素来填充内容。
- **滑块（slide）**：在段落内部，使用`<div class="slide">`定义，滑块是段落内的子页面，可以在同一屏内水平滚动。
### 4. 配置选项
fullpage.js提供了许多配置选项，例如：
- `scrollSensitivity`：调整滚动敏感度。
- `scrollBar`：是否显示滚动条。
- `navigation`：是否开启导航栏。
- `anchors`：定义段落和滑块的锚点链接。
- `sectionsColor`：设置各段落的背景颜色。
- `loopTop`/`loopBottom`：是否循环滚动至顶部或底部。
### 5. 事件与方法
- **事件**：如`onLeave`（离开当前段落）、`afterLoad`（加载新段落后触发）等，可以监听并执行相应操作。
- **方法**：如`moveTo`（跳转到指定段落）、`reBuild`（重新构建布局）等，提供对插件功能的动态控制。
### 6. 示例文件分析
压缩包中的`index.html`等文件可能是fullpage.js应用的实例，展示了如何配置和使用该插件。每个`index.html`可能包含不同的段落和滑块布局，以及不同的配置选项。通过查看这些文件，你可以更好地理解fullpage.js的用法和效果。
fullpage.js是一个强大且灵活的全屏分页插件，能够帮助开发者快速实现富有创意的全屏滚动网站。通过学习和实践，你可以根据需求定制出满足特定设计风格和功能的全屏分页效果。
fullpageJs.zip （19个子文件） 
index8.html 7KB
images 
2.jpg 398KB
jquery.fullPage.js 57KB
