本文作者將教你用另一種方式實現輪播圖交互，enjoy~

輪播圖的實現方式有很多，絕大多數的童鞋也習慣了用堪稱“萬能”的動態面板去實現。但是，對于一些特殊的輪播圖該如何實現更好呢？

比如下面的示例效果：

在線預覽

這是一種具有3D效果的輪播圖，多張不同尺寸的圖片組合具有視差效果，點擊兩側的圖片圖片將進行位移并且改變大小。選中的圖片始終位于中央。話不多說，我們看看如何不用動態面板來實現這種效果。

實現

1. 準備三張圖，如圖方式設置位置及每張圖的大小

圖一（pic1）設置

圖二（pic2）設置

圖三（pic3）設置

按照上圖所示設置好圖片位置及大小后我們分析交互動作：

• 以pic1為例，其位置有3種情況：位置1，位置2，位置3。
• 當pic1位于位置1和3時，點擊pic1，pic1將移動到位置2并且變大，當pic1位于位置2的時候點擊不進行交互動作。
• 同理，pic2和pic3的點擊交互動作同pic1。
• 圖片的位移在三個固定的點，圖片的大小有兩個，移動到最中間即位置2的時候最大，兩側大小一樣。
• 圖片需要自動輪播，所以在頁面載入的時候我們可以考慮觸發圖片的鼠標點擊事件。這樣能實現圖片的位移及大小變化。
• 鼠標的單擊事件能夠觸發一次事件的執行，無法實現事件循環執行，也就無法實現自動輪播。
• 綜上我們可以考慮通過設置變量控制事件的持續執行。

通過以上交互的分析,我們可以假設初始狀態下：

pic1在位置1時候變量：var1=1 ;

pic2在位置2時候變量：var2=2;

pic3在位置3時候變量：var3=3;

大圖寬度=wb

大圖高度=hb

小圖寬度=ws

小圖高度=hs

pic1位置（x1,y1）

pic2位置（x2,y2）

pic3位置（x3,y3）

如圖所示：

2. 鼠標點擊交互設置

pic1鼠標單擊交互設置：

首先判斷了pic1的位置是在位置1還是在位置3,（位于位置2時不用位移所以不判斷）；

如果在位置1的時候：

移動pic1到位置2并且尺寸變大，pic2位于位置2，所以將會變小并且位移到位置3；由于pic3處在位置3的位置所以只需要位移到位置1不用改變尺寸。最后標記當前各個圖片的位置即：var1=2;var2=3；var3=1。

如果在位置3的時候：

移動pic1到位置2，pic1尺寸變大，pic3變小位移到位置1，pic2位移到位置3，最后標記當前各個圖片的位置即：var1=2;var2=3;var3=1。

同理可以設置pic2和pic3的鼠標點擊交互：

3. 頁面載入事件設置

頁面載入時判斷圖片位置即判斷三個變量值，根據不同的位置去觸發各圖片的鼠標單擊事件，實現圖片的位移，當執行完再次觸發頁面載入事件就實現了一個閉環，圖片即可自動循環輪播，而整個原型由于變量的應用使得你可以用于任何場景，最多改下變量值，從而大大增強了原型的復用性，擴展性。

本文由 @HideOnBush 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pixabay，基于 CC0 協議