不管是在PC端還是移動(dòng)端，輪播圖是常見(jiàn)的設(shè)計(jì)元素。下面詳細(xì)講解輪播圖的制作步驟。

作為Axure初學(xué)者，把最近學(xué)到的記錄下來(lái)，和大家一起學(xué)習(xí)。

如何實(shí)現(xiàn)輪播圖：

1. 循環(huán)展示輪播圖片；
2. 將圓點(diǎn)與輪播圖一一對(duì)應(yīng)；
3. 實(shí)現(xiàn)前一張、后一張切換。
   

1、所需元件

首先我們需要準(zhǔn)備以下元件：

動(dòng)態(tài)面板（1000*400）、圓（3個(gè)，15*15）、向左、向右按鈕圖片（50*50）。

2、填充動(dòng)態(tài)面板

①在動(dòng)態(tài)面板中，填充內(nèi)容，每個(gè)狀態(tài)添加一個(gè)圖片，這就是在輪播時(shí)展示的圖片。

將動(dòng)態(tài)面板命名為“輪播圖面板”，并在動(dòng)態(tài)面板中添加3個(gè)狀態(tài)，分別命名為“輪播圖1”、“輪播圖2”、“輪播圖3”。如下圖：

雙擊面板中的狀態(tài)，在每個(gè)狀態(tài)中添加一張圖片。如下圖：

3、添加事件

（1）循環(huán)展示圖片

設(shè)置在載入時(shí)進(jìn)行自動(dòng)輪播動(dòng)作。

點(diǎn)擊輪播圖面板，在屬性中雙擊【載入時(shí)】。

在元件中選擇【設(shè)置面板狀態(tài)】，在右側(cè)配置動(dòng)作中，選擇【輪播圖面板】，選擇狀態(tài)【NEXT】，配置如下圖。點(diǎn)擊確定。

（2）輪播圖與選項(xiàng)圓點(diǎn)對(duì)應(yīng)

①將圓點(diǎn)設(shè)置成選項(xiàng)組。（選項(xiàng)組作用：同一個(gè)選項(xiàng)組的元件，當(dāng)其中一個(gè)部件被選中時(shí)，系統(tǒng)會(huì)自動(dòng)取消選擇其他部件。）

同時(shí)選中三個(gè)圓（圓從左至右分別命名為“1”、“2”、“3”），鼠標(biāo)右鍵，點(diǎn)擊【設(shè)置選項(xiàng)組】，給選選項(xiàng)組命名后，點(diǎn)擊確定。

②設(shè)置面板狀態(tài)與圓點(diǎn)的對(duì)應(yīng)關(guān)系。

面板狀態(tài)為輪播圖1時(shí)，對(duì)應(yīng)圓點(diǎn)1；面板狀態(tài)為輪播圖2時(shí)，對(duì)應(yīng)圓點(diǎn)2；面板狀態(tài)為輪播圖3時(shí)，對(duì)應(yīng)圓點(diǎn)3。

點(diǎn)擊輪播面板，在屬性中雙擊【狀態(tài)改變時(shí)】，【添加條件】，點(diǎn)擊確定。條件狀態(tài)設(shè)置如下：

添加【選中】動(dòng)作，選擇橢圓1，點(diǎn)擊確定。如下圖：

重復(fù)以上操作兩次，條件為面板狀態(tài)==輪播圖2時(shí)，選中橢圓2；條件為面板狀態(tài)==輪播圖3時(shí)，選中橢圓3。如下圖：

③點(diǎn)擊圓點(diǎn)時(shí)展示對(duì)應(yīng)圖片，以及圖片進(jìn)入、退出方式的設(shè)置。

點(diǎn)擊橢圓1，雙擊【鼠標(biāo)點(diǎn)擊事件】，【設(shè)置面板狀態(tài)】，選擇【輪播圖1】，選擇動(dòng)畫(huà)方式。如下圖：

④點(diǎn)擊圓點(diǎn)出現(xiàn)對(duì)應(yīng)圖片后，需要循環(huán)展示圖片，所以還需加上以下步驟。

點(diǎn)擊【設(shè)置面板】，選擇【NEXT】狀態(tài),設(shè)置循環(huán)效果，如下圖：

對(duì)橢圓2、橢圓3進(jìn)行同樣的動(dòng)作設(shè)置（橢圓2選擇狀態(tài)為輪播圖2，橢圓3選擇狀態(tài)為輪播圖3。）。

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

①點(diǎn)擊向左按鈕時(shí)，展示前一張圖片。如果當(dāng)前圖片為第一張輪播圖，則點(diǎn)擊向左，出現(xiàn)第三張輪播圖。

選中【向左】元件，添加【鼠標(biāo)單擊時(shí)】，添加條件，如下：

【設(shè)置面板狀態(tài)】，選擇狀態(tài)【輪播圖3】，設(shè)置動(dòng)畫(huà)狀態(tài)，如下圖：

循環(huán)設(shè)置：再次點(diǎn)擊【設(shè)置面板狀態(tài)】，選擇狀態(tài)【NEXT】，設(shè)置循環(huán)，點(diǎn)擊確定。如下圖：

②如果當(dāng)前輪播圖不是第一張圖片，則顯示前一張圖片。

選擇【向左】元件，【鼠標(biāo)單擊事件】添加用例，添加條件，面板狀態(tài)不等于輪播圖1時(shí)，如下圖：

【設(shè)置面板狀態(tài)】，勾選【輪播圖面板】，選擇【Previous】狀態(tài)，設(shè)置動(dòng)畫(huà)。

循環(huán)設(shè)置：再次點(diǎn)擊【設(shè)置面板狀態(tài)】，選擇狀態(tài)【NEXT】，設(shè)置循環(huán)，點(diǎn)擊確定。如下圖：

③點(diǎn)擊向右按鈕，出現(xiàn)下一張圖片。如果當(dāng)前圖片為第三張輪播圖，點(diǎn)擊下一張，出現(xiàn)第一張圖片。

選中【向右】元件，添加【鼠標(biāo)單擊時(shí)】，添加條件，如下：

【設(shè)置面板狀態(tài)】，選擇狀態(tài)【輪播圖1】，設(shè)置動(dòng)畫(huà)狀態(tài)，如下圖：

循環(huán)設(shè)置：再次點(diǎn)擊【設(shè)置面板狀態(tài)】，選擇狀態(tài)【NEXT】，設(shè)置循環(huán)，點(diǎn)擊確定。如下圖：

④如果當(dāng)前圖片不是第三張輪播圖，點(diǎn)擊向右按鈕，出現(xiàn)下一張圖片。

選擇【向右】元件，【鼠標(biāo)單擊事件】添加用例，添加條件，面板狀態(tài)不等于輪播圖3時(shí)，如下圖：

【設(shè)置面板狀態(tài)】，勾選【輪播圖面板】，選擇【NEXT】狀態(tài)，設(shè)置動(dòng)畫(huà)，如下圖：

循環(huán)設(shè)置：再次點(diǎn)擊【設(shè)置面板狀態(tài)】，選擇狀態(tài)【NEXT】，設(shè)置循環(huán)，點(diǎn)擊確定。如下圖：

通過(guò)以上步驟，就可以在Axure中完成輪播圖的制作啦。點(diǎn)擊預(yù)覽，即可看到輪播圖的效果了~

后續(xù)筆者會(huì)更新一系列Axure制作步驟詳解。

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

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

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