fullpage使用

pkwenda 发布于2019-08-26 14:06 / 952人阅读

摘要：的地址首先已经更新到版本了，并且从版本摒弃了的依赖，并且之前多种语言对开发者友好。但是为了兼容不能使用版本，只能使用版本及其以下，虽然说兼容但是实际上并没有兼容。

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


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

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

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

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

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

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

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

个人见解，仅做参考

服务器托管云服务器 fullpage fullpage.js fullpage固定导航 https使用oos使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110046.html

原生js实现全屏滚动--fullPage

摘要：原生实现全屏滚动点击箭头，实现下一页滚轮事件上滑下滑滚动到对应页定时器解决函数连续执行页面滚动，导航对应变化点击导航，页面滚动部分全屏滚动第页第页第页第页第页下三角部分容器全屏滚动容器全屏滚动下一页和部分图片原生js实现全屏滚动 fullPage.js function fullPage() { const fullPage = document.getEleme...

yuanzhanghu 2019-08-23 15:07 评论0 收藏0
AlloyTouch全屏滚动插件发布--30秒搞定顺滑H5页

原文链接：https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先验货 showImg(https://segmentfault.com/img/remote/1460000007885626?w=280&h=280); 插件代码可以在这里找到。注意，虽然是扫码体验，但是AlloyTouch.FullPag...

_ivan 2019-08-21 11:21 评论0 收藏0