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后面会出现闪动现象

个人见解，仅做参考