本文作者將教你用另一種方式實(shí)現(xiàn)輪播圖交互，enjoy~

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

比如下面的示例效果：

在線預(yù)覽

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

實(shí)現(xiàn)

1. 準(zhǔn)備三張圖，如圖方式設(shè)置位置及每張圖的大小

圖一（pic1）設(shè)置

圖二（pic2）設(shè)置

圖三（pic3）設(shè)置

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

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

通過以上交互的分析,我們可以假設(shè)初始狀態(tài)下：

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. 鼠標(biāo)點(diǎn)擊交互設(shè)置

pic1鼠標(biāo)單擊交互設(shè)置：

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

如果在位置1的時候：

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

如果在位置3的時候：

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

同理可以設(shè)置pic2和pic3的鼠標(biāo)點(diǎn)擊交互：

3. 頁面載入事件設(shè)置

頁面載入時判斷圖片位置即判斷三個變量值，根據(jù)不同的位置去觸發(fā)各圖片的鼠標(biāo)單擊事件，實(shí)現(xiàn)圖片的位移，當(dāng)執(zhí)行完再次觸發(fā)頁面載入事件就實(shí)現(xiàn)了一個閉環(huán)，圖片即可自動循環(huán)輪播，而整個原型由于變量的應(yīng)用使得你可以用于任何場景，最多改下變量值，從而大大增強(qiáng)了原型的復(fù)用性，擴(kuò)展性。

本文由 @HideOnBush 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pixabay，基于 CC0 協(xié)議