js使用swiper实现层叠轮播效果实例代码


Posted in Javascript onDecember 12, 2018

前言

swiper实现轮播图几乎是没有一点点技术含量,但是用起来却很方便,包括对移动端的支持也很好。 由于简单这里当然就不会去详细介绍了,下面就来开始本文的正文内容

实现过程:

一.移动端-需求swiper 4.0.3实现层叠轮播

二.实现效果如下

js使用swiper实现层叠轮播效果实例代码

三.方案:查找了下发现使用swiper的切换效果coverflowEffect可以实现

1.coverflow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式

2.coverflow的属性:

rotate:slide做3d旋转时Y轴的旋转角度。默认50。

stretch:每个slide之间的拉伸值,越大slide靠得越紧。 默认0。

depth:slide的位置深度。值越大z轴距离越远,看起来越小。 默认100。

modifier:depth和rotate和stretch的倍率,相当于depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显。默认1。

slideShadows:开启slide阴影。默认 true。

四.代码:

this.swiper = new Swiper('.case-swiper-container', {
    centeredSlides: false, // 选中slide居中显示
    initialSlide: 1, // 默认选中项索引
    slidesPerView: 1, // 自动匹配每次显示的slide个数,loop='auto'模式下,还需要设置loopedSlides
    effect: 'coverflow', // 切换效果-3d
    coverflowEffect: {
     rotate: 0,
     stretch: 10,
     depth: 160,
     modifier: 2,
     slideShadows: true
    },
    pagination: {
     el: '.swiper-pagination'
    },
    on: {
     init() {
      const item = JSON.parse($($(this.$el[0]).find('.swiper-slide')[this.activeIndex]).attr('data-item'));
      _this.updateCaseInfo(item);
     },
     slideChange() { // 轮播slide同时更新文字描述
      const item = JSON.parse($($(this.$el[0]).find('.swiper-slide')[this.activeIndex]).attr('data-item'));
      _this.updateCaseInfo(item);
     }
    }
   });

5.注意:

5.1若期望选中slide居中显示,则设置centerSlides:true,若期望在默认显示轮播时去掉左边空白,可设置initialSlide:1

5.2不要试图控制默认选中项的宽高,会影响正常的轮播效果,只能通过调整coverflow的相关属性和swiper容器的宽高达到最终的效果

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
用js生产批量批处理执行命令
Jul 28 Javascript
网页中CDATA标记的说明
Sep 12 Javascript
jquery操作select option 的代码小结
Jun 21 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 Javascript
使用vant的地域控件追加全部选项
Nov 03 Javascript
JS Object构造函数之Object.freeze
Apr 28 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 #Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 #Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 #Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 #Javascript
express express-session的使用小结
Dec 12 #Javascript
解决vue移动端适配问题
Dec 12 #Javascript
js中位运算的运用实例分析
Dec 11 #Javascript
You might like
PHP之数组学习
2011/05/29 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
Firefox div高度自适应
2009/04/28 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
python 实现堆排序算法代码
2012/06/05 Python
python抓取百度首页的方法
2015/05/19 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
六十岁生日答谢词
2014/01/10 职场文书
市场营销职业生涯规划书范文
2014/01/12 职场文书
网络编辑求职信
2014/04/30 职场文书
追悼会悼词大全
2015/06/23 职场文书
新娘婚礼致辞
2015/07/27 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle