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://github.com/ng-dnd/ng-dnd

基于 Angular Material 的中背景管理架構 https://github.com/ng-matero/ng-matero

Angular Material Extensions 擴充元件庫 https://github.com/ng-matero/extensions

仿 Windows 照片檢視器插件 https://github.com/nzbin/photoviewer

仿 Windows 照片檢視器插件 jQuery 版 https://github.com/nzbin/magnify

完美替代 jQuery 的子產品化 DOM 庫 https://github.com/nzbin/domq

簡化類名的輕量級 CSS 架構 https://github.com/nzbin/snack

與任意 UI 架構搭配使用的通用輔助類 https://github.com/nzbin/snack-helper

單元素純 CSS 加載動畫 https://github.com/nzbin/three-dots

有趣的 jQuery 卡片抽獎插件 https://github.com/nzbin/CardShow

懸疑科幻電影推薦 https://github.com/nzbin/movie-gallery

鍛煉記憶力的小程式 https://github.com/nzbin/memory-stake