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後面會出現閃動現象

我的看法，僅作參考