覺得下面這個分享挺好，我就不重複做了。

如何製作輪播圖：

（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中完成輪播圖的製作啦。點選預覽，即可看到輪播圖的效果了~

作者：Olga_Hu 連結：https://www.jianshu.com/p/628a22c1f653 來源：簡書 簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。