当前位置: 首页 > news >正文

Carousel 旋转画廊特效的疑难杂症

疑难杂症

该画廊特效的特点就是前后元素有层级关系。

我想很多人应该看过或者用过这个插件carousel.js,网上也有相关的教程。不知道这个插件的原型是哪个,有知道的朋友可以告诉我。

该插件相对完美,但是实际在项目中使用时却发现了一个令人头疼的bug。如果图片只有三张,旋转过度时会出现如下的交叉紊乱(没发现的多试几次)。

See the Pen carousel by Zongbin Niu (@nzbin) on CodePen.

分析一下代码会发现,主要是第一个元素的 z-index 问题。当前图片获取的是前一张或者后一张的 z-index 值,所以第一个元素在相同 z-index 的情况下会被遮挡。道理很简单,关键是解决办法。起初我希望在原有插件的基础上通过小改动,解决这个不大不小的bug。事实证明很困难。当然也可能是自己太笨,想不到更好的解决办法。至少应该改变一下思路。

类似插件

我试图寻找类似的插件,想看看别人的处理方法,但令人遗憾的是,大多数类似特效如果只有3张图片时也会出现奇怪问题。最终还是找到了几款非常优秀的旋转画廊插件。

1.roundabout.js

官网:http://demo.niutuku.com/js/20/3/

See the Pen roundabout by Zongbin Niu (@nzbin) on CodePen.

roundabout这个插件的优秀之处无需多言,不过轮播效果还是有点不太一样,看看下面这个插件!

2.featureCarousel.js

官网:http://www.bkosborne.com/jquery-feature-carousel

See the Pen featureCarousel by Zongbin Niu (@nzbin) on CodePen.

这个效果与我需要的效果完全一样,会不会carousel就是以这个插件为原型的呢?

作者还有一个类似的插件,主要是配置参数有些区别,就不上传示例了,感兴趣的可以看官网

http://www.bkosborne.com/jquery-waterwheel-carousel

转载于:https://www.cnblogs.com/nzbin/p/5782333.html

相关文章:

  • 复习(2)
  • linux jenkins添加windows节点,实现自动化部署
  • 理解 Android MVP 开发模式
  • 文本文件查看及创建
  • Jquery easyui tree 一些常见操作
  • 设计模式(二十三)中介者模式
  • 3.7、@ResponseBody 和 @RestController
  • C 语言 格式化输出输入
  • ls输出显示命令总结
  • 指针
  • 第二周 词频统计
  • java之struts2的action的创建方式
  • linux安装openssl、swoole等扩展的具体步骤
  • CSS 分享
  • VS2017 常用快捷键
  • [原]深入对比数据科学工具箱:Python和R 非结构化数据的结构化
  • 10个确保微服务与容器安全的最佳实践
  • js算法-归并排序(merge_sort)
  • React-生命周期杂记
  • TypeScript实现数据结构(一)栈,队列,链表
  • VUE es6技巧写法(持续更新中~~~)
  • Vue.js 移动端适配之 vw 解决方案
  • Windows Containers 大冒险: 容器网络
  • 微信开放平台全网发布【失败】的几点排查方法
  • 鱼骨图 - 如何绘制?
  • 栈实现走出迷宫(C++)
  • 交换综合实验一
  • 昨天1024程序员节,我故意写了个死循环~
  • ​创新驱动,边缘计算领袖:亚马逊云科技海外服务器服务再进化
  • # 计算机视觉入门
  • ## 临床数据 两两比较 加显著性boxplot加显著性
  • #《AI中文版》V3 第 1 章 概述
  • #中国IT界的第一本漂流日记 传递IT正能量# 【分享得“IT漂友”勋章】
  • (02)Cartographer源码无死角解析-(03) 新数据运行与地图保存、加载地图启动仅定位模式
  • (13)Latex:基于ΤΕΧ的自动排版系统——写论文必备
  • (2)(2.4) TerraRanger Tower/Tower EVO(360度)
  • (附源码)ssm教材管理系统 毕业设计 011229
  • (一)为什么要选择C++
  • .bat批处理(六):替换字符串中匹配的子串
  • .NET 3.0 Framework已经被添加到WindowUpdate
  • .NET开源快速、强大、免费的电子表格组件
  • .NET中GET与SET的用法
  • /etc/skel 目录作用
  • @ModelAttribute注解使用
  • [ 攻防演练演示篇 ] 利用通达OA 文件上传漏洞上传webshell获取主机权限
  • [20140403]查询是否产生日志
  • [ActionScript][AS3]小小笔记
  • [BJDCTF2020]The mystery of ip
  • [c++] 自写 MyString 类
  • [C++]类和对象(中)
  • [CSS]浮动
  • [DevOps云实践] 彻底删除AWS云资源
  • [elastic 8.x]java客户端连接elasticsearch与操作索引与文档
  • [Excel] vlookup函数
  • [Java]快速入门优先队列(堆)手撕相关面试题