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

271 阅读2分钟

背景

輪播圖,絕大部份現代網站都具有的功能模塊,特是在電子商城,特別是團隊使用敏捷開發的情況下,能自己動手寫輪播的時間少之又少,再加上時間成本,寫出來還不一定能適應各種場景,還會有一些隱藏的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,這樣會影響切換效果造成不可預計的效果哦~