資訊專欄INFORMATION COLUMN
摘要：的地址首先已經(jīng)更新到版本了，并且從版本摒棄了的依賴，并且之前多種語言對開發(fā)者友好。但是為了兼容不能使用版本，只能使用版本及其以下，雖然說兼容但是實際上并沒有兼容。
fullpage的git地址
首先fullpage 已經(jīng)更新到3.x版本了，并且從3.x版本摒棄了jQuery的依賴，并且之前多種語言對開發(fā)者友好。
但是為了兼容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
基礎(chǔ)的準備好了就可以使用fullpage了
html
// 每一屏使用section的類名 // 水平滾動分兩屏整個視口自動高度// fp-auto-height 加入該類名后這一屏就不會是100%的高度了可以自定義高度，在這個div中加入一個div去控制高度
fullpage 的水平滾動幻燈片切換的只能通過小圓點或者左右箭頭去控制切換，不能實現(xiàn)自動輪播，要想實現(xiàn)自動輪播需要使用其他的插件比如swiper等
js
$(document).ready(function() {
$("#fullpage").fullpage({
controlArrows: false, // 確定是否將幻燈片的控制箭頭向右或向左移動, 左右箭頭
slidesNavigation: true // 小圓點
});
});
這里 #fullpage 是最外層包裹的盒子ID
當然如果你所有的屬性都用默認的那可以不傳遞值
$(document).ready(function() {
$("#fullpage").fullpage();
});
這里就可以跑起來了，實現(xiàn)了一個整平滾動的demo
這里需要注意的是，如果將初始化的js代碼寫著HTML后面會出現(xiàn)閃動現(xiàn)象個人見解，僅做參考
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110046.html
摘要：原生實現(xiàn)全屏滾動點擊箭頭，實現(xiàn)下一頁滾輪事件上滑下滑滾動到對應(yīng)頁定時器解決函數(shù)連續(xù)執(zhí)行頁面滾動，導(dǎo)航對應(yīng)變化點擊導(dǎo)航，頁面滾動部分全屏滾動第頁第頁第頁第頁第頁下三角部分容器全屏滾動容器全屏滾動下一頁和部分圖片 原生js實現(xiàn)全屏滾動 fullPage.js function fullPage() { const fullPage = document.getEleme...
原文鏈接：https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先驗貨 showImg(https://segmentfault.com/img/remote/1460000007885626?w=280&h=280); 插件代碼可以在這里找到。 注意，雖然是掃碼體驗，但是AlloyTouch.FullPag...
閱讀 1769·2021-11-24 09:39
閱讀 1695·2021-11-22 15:22
閱讀 1019·2021-09-27 13:36
閱讀 3276·2021-09-24 10:34
閱讀 3348·2021-07-26 23:38
閱讀 2641·2019-08-29 16:44
閱讀 986·2019-08-29 16:39
閱讀 1116·2019-08-29 16:20
