fullpage使用

fullpage 的 git 地址

首先 fullpage 已经更新到 3.x 版本了，并且从 3.x 版本摒弃了 jQuery 的依赖，并且之前多种语言对开发者友好。
但是为了兼容 ie8 不能使用 3.x 版本，只能使用 2.8.9 版本及其以下，虽然 2.9.x 说兼容 ie8 但是实际上并没有兼容。因此想要兼容 ie8 最高版本就是 2.8.9（我尝试了一下反正 2.9.x 不支持）

使用 fullpage 要引入 fullpage.css, fullpage.js 这些 git 上都可以找到，cdn 链接 https://cdnjs.com/libraries/f…

并且 2.x 版本是依赖 jQuery 因此必须要引入 jQuery

基础的准备好了就可以使用 fullpage 了

html

<div id="fullpage">
    <div class="section"> // 每一屏使用 section 的类名
        <div class="slide"></div> // 水平滚动分两屏
        <div class="slide"></div>
    </div>
    <div class="section">
    </div>
    <div class="section"> 整个视口 </div>
    <div class="section fp-auto-height"> 自动高度 </div> // fp-auto-height 加入该类名后这一屏就不会是 100% 的高度了可以自定义高度，在这个 div 中加入一个 div 去控制高度
</div>

fullpage 的水平滚动幻灯片切换的只能通过小圆点或者左右箭头去控制切换，不能实现自动轮播，要想实现自动轮播需要使用其他的插件比如 swiper 等

js

$(document).ready(function() {$('#fullpage').fullpage({
    controlArrows: false, // 确定是否将幻灯片的控制箭头向右或向左移动, 左右箭头
    slidesNavigation: true // 小圆点
  });
});

这里 #fullpage 是最外层包裹的盒子 ID
当然如果你所有的属性都用默认的那可以不传递值

$(document).ready(function() {$('#fullpage').fullpage();});

这里就可以跑起来了，实现了一个整平滚动的 demo

这里需要注意的是，如果将初始化的 js 代码写着 HTML 后面会出现闪动现象

个人见解，仅做参考