fullpage使用

2019-08-20 admin

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

个人见解,仅做参考

[转载]原文链接:https://segmentfault.com/a/1190000020131563

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-73050.html

文章标题:fullpage使用

相关文章
在 Microsoft Azure 中使用 MEAN 堆栈基于开放数据协议
网络开发人员通常构建伟大的应用程序在客户端使用JavaScript和ASP(c#或Visual Basic . NET)在服务器端。 但是如果你能使用一个共同的语言来构建应用程序的所有层堆栈,从浏览器和服务器端业务处理服务层,甚至在数据库查...
2015-11-12
使用axios发送post请求,body传送数据格式form和json区别
先来看看这两个种传送格式的写法 1.form格式,将Content-Type类型设置为application/x-www-form-urlencode,POST请求时将data序列化,提交的数据会按照 key1=val1&amp;key2=...
2018-07-25
Bootstrap table简单使用总结
最近接触一个很棒的插件,Bootstrap table没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真的很实用。 构造方式 1 、HTML &lt;div clas...
2017-03-17
AngularJS:何时应该使用Directive、Controller、Servic
AngularJS是一款非常强大的前端MVC框架。同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉。(译者注:老外真谦虚,我大天朝的码农对这些概念那是相当熟悉啊!)这些概念有: Directive(指令) Controller(控制...
2015-11-11
js使用split函数按照多个字符对字符串进行分割的方法
本文实例讲述了js使用split函数按照多个字符对字符串进行分割的方法。分享给大家供大家参考。具体分析如下: js中的split()函数可以对字符串按照指定的符号进行分割,但是如果字符串中存在多个分割符号,js的split()函数是否还可以...
2017-03-21
mpvue 小程序如何自定义tabBar,不使用navigateTo跳转,模拟redirectTo跳转
原生tabBar tabBar: { &quot;list&quot;: [ { pagePath: &quot;pages&#x2F;index&#x2F;main&quot;, iconPath: &...
2018-05-25
在 mpvue 使用 echarts 小程序组件
具体操作 下载 echarts-for-weixin 。 把其 ec-canvas 目录移动到 mpvue 项目的 static 目录下。 对 ec-canvas/ec-canvas.js 进行小调整,考虑提 pr 到 ec-c...
2018-03-11
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 =&gt; 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: &lt;script&gt; exp...
2017-03-13
ajax教程之ajax使用Http请求
ajax中是如何让使用http请求的呢? 在传统的JS编程中,如果您希望从服务器上的文件或数据库中得到任何的信息,或者向服务器发送信息的话,就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发...
2015-11-12
如何使用JavaScript
一、应用&lt;script&gt;标签加入JavaScript 任何脚本语言均可以通过&lt;script&gt;…&lt;/script&gt;标记对加入到HTML代码中(即是加入到网页文档&lt;html&gt;…&lt;/html&...
2015-11-12
回到顶部