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
- Scrapy-Redis分布式爬虫源码解析
- scala 隐式详解(implicit关键字)
- scala的option和some
- PEP8规则及Pycharm应用
- (四) 如何将socket设置为非阻塞模式
- Scala Collections集合的几个重要概念
- (五)如何编写高性能日志
- Scala之偏函数Partial Function
- (六)关于网络编程的一些实用技巧和细节
- 快学Scala习题答案汇总
- (八)高性能服务器架构设计总结1——以flamigo服务器代码为例
- (八)高性能服务器架构设计总结2——以flamigo服务器代码为例
- Scala集合练习题
- 机器学习(10)之趣味案例理解朴素贝叶斯
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 机器学习模型部署—PMML
- 「文档数据库之争」MongoDB和CouchDB的比较
- 【Python】【爬虫】最近想买电脑,用Python爬取京东评论做个参考
- 新手如何快速入门Python
- 10行Python代码自动清理电脑内重复文件,解放双手!
- 模型评价指标—KS
- python 学习之:修饰器
- python 学习之:正则表达式(1)---- 可选函数参数
- PySpark——开启大数据分析师之路
- 一款直击痛点的优秀http框架,让我超高效率完成了和第三方接口的对接
- 强连通和连通算法在关联图谱中的应用
- PySpark SQL——SQL和pd.DataFrame的结合体
- 初识Kubernetes及快速安装
- 使用k8s部署springboot+redis简单应用
- React Ref 使用总结