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