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

我的看法，仅作参考