不管是在PC端還是移動端，輪播圖是常見的設計元素。下面詳細講解輪播圖的制作步驟。

作為Axure初學者，把最近學到的記錄下來，和大家一起學習。

如何實現輪播圖：

1. 循環展示輪播圖片；
2. 將圓點與輪播圖一一對應；
3. 實現前一張、后一張切換。
   

1、所需元件

首先我們需要準備以下元件：

動態面板（1000*400）、圓（3個，15*15）、向左、向右按鈕圖片（50*50）。

2、填充動態面板

①在動態面板中，填充內容，每個狀態添加一個圖片，這就是在輪播時展示的圖片。

將動態面板命名為“輪播圖面板”，并在動態面板中添加3個狀態，分別命名為“輪播圖1”、“輪播圖2”、“輪播圖3”。如下圖：

雙擊面板中的狀態，在每個狀態中添加一張圖片。如下圖：

3、添加事件

（1）循環展示圖片

設置在載入時進行自動輪播動作。

點擊輪播圖面板，在屬性中雙擊【載入時】。

在元件中選擇【設置面板狀態】，在右側配置動作中，選擇【輪播圖面板】，選擇狀態【NEXT】，配置如下圖。點擊確定。

（2）輪播圖與選項圓點對應

①將圓點設置成選項組。（選項組作用：同一個選項組的元件，當其中一個部件被選中時，系統會自動取消選擇其他部件。）

同時選中三個圓（圓從左至右分別命名為“1”、“2”、“3”），鼠標右鍵，點擊【設置選項組】，給選選項組命名后，點擊確定。

②設置面板狀態與圓點的對應關系。

面板狀態為輪播圖1時，對應圓點1；面板狀態為輪播圖2時，對應圓點2；面板狀態為輪播圖3時，對應圓點3。

點擊輪播面板，在屬性中雙擊【狀態改變時】，【添加條件】，點擊確定。條件狀態設置如下：

添加【選中】動作，選擇橢圓1，點擊確定。如下圖：

重復以上操作兩次，條件為面板狀態==輪播圖2時，選中橢圓2；條件為面板狀態==輪播圖3時，選中橢圓3。如下圖：

③點擊圓點時展示對應圖片，以及圖片進入、退出方式的設置。

點擊橢圓1，雙擊【鼠標點擊事件】，【設置面板狀態】，選擇【輪播圖1】，選擇動畫方式。如下圖：

④點擊圓點出現對應圖片后，需要循環展示圖片，所以還需加上以下步驟。

點擊【設置面板】，選擇【NEXT】狀態,設置循環效果，如下圖：

對橢圓2、橢圓3進行同樣的動作設置（橢圓2選擇狀態為輪播圖2，橢圓3選擇狀態為輪播圖3。）。

（3）上一張/下一張操作

①點擊向左按鈕時，展示前一張圖片。如果當前圖片為第一張輪播圖，則點擊向左，出現第三張輪播圖。

選中【向左】元件，添加【鼠標單擊時】，添加條件，如下：

【設置面板狀態】，選擇狀態【輪播圖3】，設置動畫狀態，如下圖：

循環設置：再次點擊【設置面板狀態】，選擇狀態【NEXT】，設置循環，點擊確定。如下圖：

②如果當前輪播圖不是第一張圖片，則顯示前一張圖片。

選擇【向左】元件，【鼠標單擊事件】添加用例，添加條件，面板狀態不等于輪播圖1時，如下圖：

【設置面板狀態】，勾選【輪播圖面板】，選擇【Previous】狀態，設置動畫。

循環設置：再次點擊【設置面板狀態】，選擇狀態【NEXT】，設置循環，點擊確定。如下圖：

③點擊向右按鈕，出現下一張圖片。如果當前圖片為第三張輪播圖，點擊下一張，出現第一張圖片。

選中【向右】元件，添加【鼠標單擊時】，添加條件，如下：

【設置面板狀態】，選擇狀態【輪播圖1】，設置動畫狀態，如下圖：

循環設置：再次點擊【設置面板狀態】，選擇狀態【NEXT】，設置循環，點擊確定。如下圖：

④如果當前圖片不是第三張輪播圖，點擊向右按鈕，出現下一張圖片。

選擇【向右】元件，【鼠標單擊事件】添加用例，添加條件，面板狀態不等于輪播圖3時，如下圖：

【設置面板狀態】，勾選【輪播圖面板】，選擇【NEXT】狀態，設置動畫，如下圖：

循環設置：再次點擊【設置面板狀態】，選擇狀態【NEXT】，設置循環，點擊確定。如下圖：

通過以上步驟，就可以在Axure中完成輪播圖的制作啦。點擊預覽，即可看到輪播圖的效果了~

后續筆者會更新一系列Axure制作步驟詳解。

文件分享:http://pan.baidu.com/s/1jIAD2Vc?，密碼:272m

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

題圖來自PEXELS，基于CC0協議