本文作者將結合一個實際案例，來教大家用Axure如何實現(xiàn)這種輪播圖，enjoy~

提起輪播圖，相信大家已經非常熟悉了，腦海中自然而然的會浮現(xiàn)出輪播圖的交互效果——幾張圖片，可以逐一的左右切換顯示，而每次只能顯示一張。這是最基本的輪播圖，當然，我今天要講的不是這種。

還有一種輪播圖，會同時顯示三張圖片，中間的圖片會放大顯示（相比左右兩邊的兩張會大一些），像下面這樣：

點擊預覽

然后左右切換的時候（通過點擊左右按鈕或者左右滑動），左右兩邊的圖片移動到中間位置時會動態(tài)放大，而中間的圖片移動到左右兩邊時會動態(tài)縮小。另外，這種輪播圖也可以像普通輪播圖一樣，無限循環(huán)。

那接下來就教大家用Axure如何實現(xiàn)這種輪播圖，其實步驟很簡單，前提是你掌握了這種思路。

1. 原型解析

初次接觸到這個案例的時候，第一感覺就是應該可以實現(xiàn)，但是實現(xiàn)起來會非常復雜，后來經過了多次試驗，終于找到了一個最優(yōu)解。

我們先來分解一下這個原型的交互：

1. 左右輪播的時候三個圖片會順序移動，并且中間圖片動態(tài)縮小，左右圖片動態(tài)放大；
2. 左右輪播可以無限循環(huán)。

其實如果單獨考慮第一個問題，很容易解決；如果單獨考慮第二個問題，也很容易解決；可兩個問題結合起來一起考慮，就需要消耗一些腦細胞了。不知道各位看到這里的時候有沒有什么思路。

2. 設計思路

對于上面兩個問題，我首先考慮的是先解決第一個問題。提到輪播這個詞很容易就能想到動態(tài)面板，因為網上太多的輪播教程是基于動態(tài)面板實現(xiàn)的。于是拿動態(tài)面板（的輪播）去套用一下這個案例，發(fā)現(xiàn)無論如何都達不到預期效果，最終不得不放棄動態(tài)面板。

放棄使用動態(tài)面板就意味著要手動實現(xiàn)左右輪播的效果，通過移動圖片來實現(xiàn)，順便還可以設置圖片尺寸，來達到圖片放大縮小的效果。這個思路對于解決第一個問題貌似可行（而后來實踐證明確實可行）。

以向右輪播為例，如下圖：

當前能夠看到的是圖2，圖3（放大）和圖4，向右輪播之后看到是圖1，圖2（放大）和圖3。此時無法繼續(xù)向右輪播，更無法循環(huán)輪播。

那么接下就考慮如何實現(xiàn)持續(xù)（循環(huán)）輪播，在剛才的基礎上，我們如果要繼續(xù)向右輪播的話，應該是像下圖這樣的情況。

那么如何在向右輪播后，可以繼續(xù)向右輪播呢？從上圖可以看出來，需要將輪播后最右側的圖片（例中的圖片5）放到最左邊，這樣在繼續(xù)向右輪播后，才能有圖片源源不斷的從左邊進入畫面，從而形成一個循環(huán)。

那么問題來了，如何將最右側的圖片5放到最左邊？首先說，采用移動位置的方式是不行的。其實我們也不必真的將圖片5的位置移動到最左邊，我們在輪播后（整個圖片組發(fā)生了位移）只需要將整個圖片組復位（位置和大小都要復位）即可，然后再替換掉每個位置上顯示的圖片。

圖片組復位后，原來圖片1的位置顯示圖5，圖片2的位置顯示圖1，圖片3的位置顯示圖2，圖片4的位置顯示圖3，圖片5的位置顯示圖4。

根據(jù)以上邏輯，就可以實現(xiàn)圖片向右無限輪播，向左輪播同理。

但是，此時還有一個問題沒有解決，如何替換圖片？

同一圖片位在輪播的過程中顯示的圖片是不一樣的，比如圖片1的位置，可能會在輪播的時候顯示為圖2，圖3，圖4，圖5等等。所以，要替換顯示的圖片是不固定的，無法設置一個固定的圖片來替換，只能動態(tài)去取。

如果動態(tài)去取，必然有一個地方需要存放這些圖片，而且根據(jù)圖片的輪播，存放在每個位置的圖片會發(fā)生變化。根據(jù)這些線索，此時有一個神奇而強大的元件進入我的腦海中——那就是中繼器。

用中繼器存放圖片1-圖片5五個圖片，并且按照1-5進行排序，當圖片向右輪播時，就把中繼器中最后的一個圖片排到中繼器的第一個位置（通過更新排序字段來實現(xiàn)）；相反的，如果圖片向左輪播時，就把中繼器中第一個位置的圖片排到中繼器的最后一個位置（通過更新排序字段來實現(xiàn)）。

至于圖片的顯示，則在中繼器的每項加載時，第1個項目中的圖片顯示給圖片1，第2個項目中的圖片顯示給圖片2，以此類推，第5個項目中的圖片顯示給圖片5。
到此為止，整個原型的設計原理就講完了，接下來我們進行實踐。

3. 制作過程

3.1 添加圖片

在畫布中添加5個圖片（如下圖排列），將中間圖片的高寬尺寸設置為其他4個圖片高寬尺寸的兩倍。

3.2 編組并轉換為動態(tài)面板

將五個圖片進行編組（組合），然后將圖片組轉換為動態(tài)面板，調整動態(tài)面板中圖片組的位置，使第一個圖片恰好完整超出畫布的左邊界。調整動態(tài)面板的寬度，使其寬度正好覆蓋到第四個圖片，這樣第五個圖片就不可見，如下圖。

3.3 添加中繼器

在畫布中拖入一個中繼器，刪除掉其默認的矩形框、用例和數(shù)據(jù)集中的數(shù)據(jù)，并將其設置為隱藏。將中繼器的數(shù)據(jù)集設置為兩列，一列用于存放排序編號（本例中的sortid），一列用于存放圖片（本例中的carimg）。將排序編號列依次填充5個數(shù)：1,2,3,4,5；將圖片列導入5張圖片。

設置中繼器的“載入時”用例（將中繼器按照sortid升序排列）和“每項加載時”用例（將中繼器中的carimg依次顯示到五個圖片上）。

3.4 左右滑動圖片時進行輪播

在由圖片組轉化成的動態(tài)面板上，設置“向左滑動時”和“向右滑動時”用例。

以向左滑動時為例，分解用例中的每個動作來進行說明。

①首先將圖片組向左移動：

②然后設置圖片組中圖片3的尺寸縮小及圖片4的尺寸放大：

③添加等待時間

④更新中繼器中第一個項目的排序編號（在原來的基礎上+中繼器的項目數(shù)，使其可以排到最后的位置）：

⑤然后再將圖片組位置復位：

⑥圖片尺寸復位：

到此向左滑動時，圖片輪播效果完成，此時可以預覽一下。

向右滑動時同理，不再贅述，小伙伴可自行實現(xiàn)。

4. 經驗總結

這個案例是春節(jié)前一個小伙伴提出的，這段時間一直斷斷續(xù)續(xù)的思索著解決方案，但并未動手實踐。沒有實踐并不是因為沒有時間，而是一直沒有一個完整的思路。近日得來空閑，于是打開Axure親自動手實驗一番，在嘗試的過程中，卻意外得來靈感，最終輕松搞定。所以，有些事情只憑想是沒有結果的。做，興許能離目標更近一點。

#專欄作家#

RAEDME大鵬，人人都是產品經理專欄作家，微信公眾號raedme

本文原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載。

題圖來源于網絡