作為Axure初學(xué)者，把最近學(xué)的東西記錄下來(lái)，和大家一起學(xué)習(xí)。不管是在PC端還是移動(dòng)端，輪播圖是常見(jiàn)的設(shè)計(jì)元素。下面詳細(xì)講解輪播圖的制作步驟。
如何制作輪播圖：
（1）實(shí)現(xià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制作步驟詳解。
歡迎關(guān)注微信公眾號(hào)：Olga是肥婆。一起學(xué)習(xí)交流。
文件分享:http://pan.baidu.com/s/1jIAD2Vc，密碼:272m
