1、引入插件文件
这个插件依赖于jQuery，所以你还需要下载jQuery，并且在Fullpage插件之前引入。
下载地址：https://github.com/alvarotrigo/fullPage.js 复制地址在浏览器打开去下载
下一步，打开code local download，下载下来
2、解压压缩包，找到dist文件夹
复制fullpage.css和fullpage.js到项目中
3、引入项目
<link rel="stylesheet" href="./css/fullpage.css"> <script src="./js/jquery-1.8.3.min.js"></script> <script src="./js/fullpage.js"></script>
4、编写HTML代码
默认情况下，每一屏幕的代码都需要有DIV包裹，并且设置DIV的类名为section，默认情况下，第一个setion将作为首页显示在页面上。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- 1.引入依赖和样式 --> <link rel="stylesheet" href="./css/fullpage.css" /> <script src="./js/jquery-1.8.3.min.js"></script> <script src="./js/fullpage.js"></script> <style> .active { background-color: orange; } </style> </head> <body> <div id="fullpage"> <!--2. 默认情况下 每一屏的代码都要有一个div包裹，且类名为section 滚动到哪一屏，对应的有个.active --> <div class="section">Some section_1</div> <div class="section">Some section_2</div> <div class="section">Some section_3</div> <div class="section">Some section_4</div> </div> </body> </html> <!-- 3.书写fullpage.js的初始化代码 --> <script> $(document).ready(function () { $("#fullpage").fullpage(); }); </script>
