前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Carousel 旋转画廊特效的疑难杂症

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

作者头像
叙帝利
发布2018-01-17 16:32:16
1.1K0
发布2018-01-17 16:32:16
举报
文章被收录于专栏:前端新视界前端新视界

疑难杂症

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

我想很多人应该看过或者用过这个插件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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016-09-06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 疑难杂症
  • 类似插件
    • 1.roundabout.js
      • 2.featureCarousel.js
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档