【亲测免费】 fullPage.js 安装和配置指南

2026-01-20 02:53:48作者：贡沫苏Truman

1. 项目基础介绍和主要编程语言

项目介绍

fullPage.js 是一个用于创建全屏滚动网页（也称为单页网站或单页应用）的 JavaScript 库。它允许开发者快速简单地创建具有全屏滚动效果的网页，并支持在页面中添加横向滑块。

主要编程语言

fullPage.js 主要使用 JavaScript 编写，同时也依赖于 HTML 和 CSS 来定义页面的结构和样式。

2. 项目使用的关键技术和框架

关键技术

JavaScript: 用于实现全屏滚动和动画效果。
HTML: 用于定义页面的结构。
CSS: 用于定义页面的样式。

框架

jQuery: fullPage.js 支持作为 jQuery 插件使用，但也可以在纯 JavaScript 环境中使用。

3. 项目安装和配置的准备工作和详细安装步骤

准备工作

在开始安装和配置 fullPage.js 之前，请确保你已经具备以下条件：

一个现代的 Web 浏览器（如 Chrome、Firefox 等）。
一个文本编辑器（如 VSCode、Sublime Text 等）。
基本的 HTML、CSS 和 JavaScript 知识。

安装步骤

步骤 1：下载 fullPage.js

你可以通过以下几种方式下载 fullPage.js：

通过 GitHub 下载：访问 fullPage.js GitHub 仓库，点击页面右上角的“Code”按钮，选择“Download ZIP”下载项目的压缩包。
通过 npm 安装：如果你使用 Node.js，可以通过 npm 安装 fullPage.js：
```
npm install fullpage.js
```

通过 CDN 引入：你也可以直接通过 CDN 引入 fullPage.js 的文件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.25/fullpage.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.25/fullpage.min.js"></script>

步骤 2：创建 HTML 文件

在你的项目目录中创建一个新的 HTML 文件，例如 index.html，并在文件中添加以下基本结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fullPage.js 示例</title>
    <link rel="stylesheet" href="fullpage.min.css" />
</head>
<body>
    <div id="fullpage">
        <div class="section">第一屏</div>
        <div class="section">第二屏</div>
        <div class="section">第三屏</div>
        <div class="section">第四屏</div>
    </div>

    <script src="fullpage.min.js"></script>
    <script>
        new fullpage('#fullpage', {
            autoScrolling: true,
            scrollHorizontally: true
        });
    </script>
</body>
</html>