遇到對輪播有“過分”需求時應該怎麼做

背景

輪播圖，絕大部份現代網站都具有的功能模塊，特是在電子商城，特別是團隊使用敏捷開發的情況下，能自己動手寫輪播的時間少之又少，再加上時間成本，寫出來還不一定能適應各種場景，還會有一些隱藏的BUG，怎麼辦？今天給大家介紹一個功能強大的基于Jquery的輪播插件swiper，當然伴隨著功能強大，文件就大的基本原則，引入的時候要做好心理準備，如果需求僅是簡單的輪播就不需要引入這個啦，去找些普通的Jquery插件即可

功能介紹

當然是要看官方API啦，自己去慢慢品嘗哈~ www.swiper.com.cn/api/index.h…

案例實現

需求說明

1. 背景進行輪播
2. 右下角的商品展臺不能隨著背景進行切換
3. 右下角的商品隨著背景相關連的進行切換，有一定的立體切換效果（注意底部的商品展臺是不能切換的哦，要一直在頁面上） 還是直接看最終效果

難點

1. 右下角展臺不隨著背景輪播而滾動
2. 右下角商品隨著背景輪播而輪播
3. 豐富的切換效果
4. 背景輪播時商品相關連進行輪播，注意是相關連的，不能滾著滾著就不同步啦

實現

1. 首先有一個最外層的DIV，包裹住背景和商品區
2. 利用CSS的position 將商品區固定在右下角，展臺不隨著商品滾動也利用這個原理
3. 利用swiper的雙向控制進行背景和商品的連動
4. 豐富的切換效果

注意：如果用了切換效果后，需要在slide里使用動畫時，注意不要使用all，這樣會影響切換效果造成不可預計的效果哦~

转载于:https://juejin.im/post/5c09ee5af265da614312df42