高仿陰陽師官網輪播圖效果的jQuery插件

代碼地址如下：
http://www.demodashi.com/demo/12302.html

插件介紹

這是一個根據陰陽師官網的輪播效果所扒下來的輪播插件，主要應用於定製個性化場景，目前源碼完全公開，如有需要，可根據自己的需求修改源碼樣式下面是一個演示頁面截圖（建議使用新版谷歌、火狐瀏覽器觀看，對於ie9以下不支持CSS3屬性的瀏覽器不兼容）。

在插件包中，包含新舊兩個版本的插件js源碼，區別主要在於控制移動樣式上面，可根據自身需求修改對應css樣式及插件部分代碼，實現個性化定製。

其中index.html對應新版demo頁面，demo_old.html對應舊版demo頁面。

js文件夾目錄下包括jquery-yys-slider.js新版 js 源碼，jquery-yys-slider-old.js舊版 js 源碼。

實現邏輯

一般的輪播圖插件實現的原理，其實就是中間有一個剛好顯示一張輪播圖的視窗，然後控制輪播圖的橫向或是縱向的一個移動，來達到輪播圖切換的效果。

下面主要講一講我當時做這個輪播圖的一些思路和邏輯吧，這個輪播圖插件主要實現原理與這個方式稍有差別，主要體現在這裏不用控制輪播圖的位移，只需要控制輪播圖的class的切換，即可達到類似位移的效果。

這裏我就以四圖輪播的方式講解一下。

首先，從這個輪播圖的初始位置上觀察，暫且用所有圖片容器對應的下標作爲標識，即類名爲”.gallery_wrap”的 4個子元素，分別對應 0, 1, 2, 3。在這種圖中前三個圖片容器都分別展示出來了，最後一個下標爲 3 的元素被前面的元素遮擋住了。

下面這兩張圖片，是從初始位置，連續點擊兩次左側按鈕發生的類名變化以及位移。

從這三張圖片中，不難發現，這裏面的規律的：當我們觀察 i == 0 的圖片時，可以發現這個圖片容器的類名依次變化順序（”.gallery_left_middle” ==> “.front_side” ==> “.gallery_right_middle” ==> “.gallery_out” ==> “.gallery_left_middle”…）。實際上輪播的原理，就是讓每個圖片容器的類名變化，從而改變其css定位，來實現的位移效果。

核心代碼

輪播圖的位移，實際是靠控制輪播圖的類名變化實現的

//左側按鈕綁定點擊事件
_this.find(_gallery_item_left).on('click',function(){
  var idx = parseInt(_this.find(_gallery_left_middle).index());
  //當前展示圖片邏輯
  _this.find(_threeD_gallery_item).eq(idx).removeClass('gallery_left_middle').addClass('front_side');
  //當idx值爲0時，執行邏輯
  _this.find(_threeD_gallery_item).eq(idx == 0 ? idx + _imgNum - 1 : idx - 1).removeClass('gallery_out').addClass('gallery_left_middle');
  //當idx值爲_imgNum - 3時，執行邏輯
  _this.find(_threeD_gallery_item).eq(idx == _imgNum - 3 ? idx + 2 : idx - _imgNum + 2).removeClass('gallery_right_middle').addClass('gallery_out');
  //當idx值爲_imgNum - 2時，執行邏輯
  _this.find(_threeD_gallery_item).eq(idx == _imgNum - 2 ? idx + 1 : idx - _imgNum + 1).removeClass('front_side').addClass('gallery_right_middle');
})
//右側按鈕綁定點擊事件
_this.find(_gallery_item_right).on('click',function(){
  var idx = parseInt(_this.find(_gallery_right_middle).index());
  //當前展示圖片邏輯
  _this.find(_threeD_gallery_item).eq(idx).removeClass('gallery_right_middle').addClass('front_side');
  //當idx值爲0時，執行邏輯
  _this.find(_threeD_gallery_item).eq(idx == 0 ? idx + _imgNum - 1 : idx - 1).removeClass('front_side').addClass('gallery_left_middle');
  //當idx值爲1時，執行邏輯
  _this.find(_threeD_gallery_item).eq(idx == 1 ? idx + _imgNum - 2 : idx - 2).removeClass('gallery_left_middle').addClass('gallery_out');
  //當idx值爲_imgNum - 2時，執行邏輯
  _this.find(_threeD_gallery_item).eq(idx == _imgNum - 2 ? idx + 1 : idx - _imgNum + 1).removeClass('gallery_out').addClass('gallery_right_middle');
})

在這裏可以看到，控制輪播圖移動的實際爲兩個不可見的按鈕，分別置於正面顯示輪播圖的左右兩側，如下圖所示：

運行效果

下載附件後，直接打開index.html或demo_old.html即可在瀏覽器中看到運行效果。

使用方法

調用輪播插件：
Html：
<div class="gallery_container"></div>
Javascript：
$(".gallery_container").gallery_slider({
  imgNum: 4, // 輪播圖數量至少爲4張
  imgArr: [  // 圖片數組，圖片數組長度應與圖片數量保持一致
    'images/xxx.jpg',
    'images/xxx.jpg',
    'images/xxx.jpg',
    'images/xxx.jpg'
  ]
});

預覽圖：

預覽地址：https://yangyunhe369.github.io/jQuery-Yys-Slider

高仿陰陽師官網輪播圖效果的jQuery插件

代碼地址如下：
http://www.demodashi.com/demo/12302.html

注：本文著作權歸作者，由demo大師發表，拒絕轉載，轉載需要作者授權