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

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

比如下面的示例效果：

在線預(yù)覽

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

實(shí)現(xiàn)

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

圖一（pic1）設(shè)置

圖二（pic2）設(shè)置

圖三（pic3）設(shè)置

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

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

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

pic1在位置1時(shí)候變量：var1=1 ;

pic2在位置2時(shí)候變量：var2=2;

pic3在位置3時(shí)候變量：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時(shí)不用位移所以不判斷）；

如果在位置1的時(shí)候：

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

如果在位置3的時(shí)候：

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

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

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

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

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

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