怎么使用Axure軟件來(lái)制作banner輪播圖的交互效果呢？這篇文章里，作者做了案例分享和步驟梳理，一起來(lái)看看吧。

哈嘍，大家好！今天給大家介紹如何使用Axure軟件制作banner輪播圖的交互效果。

【案例預(yù)覽地址含下載】電腦打開(kāi)鏈接：https://wh9x1s.axshare.com/

【完整案例作品預(yù)覽含下載】：https://fx2z9z.axshare.com

一、案例介紹

【視頻教程】：?jiǎn)袅▎袅ㄒ曨l

首先，讓我們來(lái)看下效果展示：進(jìn)入頁(yè)面后自動(dòng)輪播圖片、左右滑動(dòng)也可以輪播圖片以及點(diǎn)擊任意圓點(diǎn)切換圖片。接下來(lái)，我們看下如何制作。

【效果預(yù)覽】

二、案例步驟

本次教程將分為三個(gè)步驟進(jìn)行講解：

1. 自動(dòng)輪播圖片；
2. 左右滑動(dòng)輪播圖片；
3. 點(diǎn)擊圓點(diǎn)切換圖片。

1. 自動(dòng)輪播圖片

這里我提前準(zhǔn)備了四張圖片作為輪播圖素材。首先拖入一張圖片到Axure軟件，并將其轉(zhuǎn)換為動(dòng)態(tài)面板，命名為“輪播圖”。

雙擊進(jìn)入到創(chuàng)建好的動(dòng)作面板中。在這里新增多個(gè)面板狀態(tài)，并依次拖入剩余三張圖片。

接下來(lái)單擊“輪播圖”動(dòng)態(tài)面板，選擇“載入時(shí)”的交互事件，添加“等待”動(dòng)作，設(shè)置等待時(shí)間為1000毫秒。

然后添加“設(shè)置面板狀態(tài)”，點(diǎn)擊“當(dāng)前元件”，選擇狀態(tài)為“Next”、進(jìn)入動(dòng)畫(huà)和退出動(dòng)畫(huà)選擇“向左滑動(dòng)”、點(diǎn)擊“向后循環(huán)”，點(diǎn)擊“確認(rèn)”。

以上“自動(dòng)輪播圖片”效果就做完了，我們預(yù)覽看下效果?？梢钥吹叫Ч呀?jīng)實(shí)現(xiàn)了。

接下來(lái)我們看下如何制作“左右滑動(dòng)輪播圖片”效果？

2. 左右滑動(dòng)輪播圖片

首先單擊“輪播圖”動(dòng)態(tài)面板，選擇“向左拖動(dòng)結(jié)束時(shí)”的交互事件，添加“設(shè)置面板狀態(tài)”，點(diǎn)擊“當(dāng)前元件”，選擇狀態(tài)為“Next”、點(diǎn)擊“向后循環(huán)”，進(jìn)入動(dòng)畫(huà)和退出動(dòng)畫(huà)選擇“向左滑動(dòng)”，點(diǎn)擊“確認(rèn)”。

接下來(lái)我們做向右拖動(dòng)播放輪播圖的效果，這里可以直接復(fù)制“向左拖動(dòng)結(jié)束時(shí)”的交互事件“到向右拖動(dòng)結(jié)束時(shí)”的交互事件上，并點(diǎn)擊進(jìn)入粘貼好的交互事件中，將選擇狀態(tài)“Next”修改為“上一個(gè)（previous）”，然后進(jìn)入動(dòng)畫(huà)和退出動(dòng)畫(huà)改為“向右滑動(dòng)”，點(diǎn)擊“確認(rèn)”。

以上“左右滑動(dòng)輪播圖片”的效果就做完了，我們看下預(yù)覽效果，可以看到效果已經(jīng)實(shí)現(xiàn)了。

接下來(lái)我們看下如何制作“點(diǎn)擊切換輪播圖”效果？

3. 點(diǎn)擊圓點(diǎn)切換圖片

首先我們新建四個(gè)圓點(diǎn)，調(diào)整好位置。并依次命名為1、2、3、4。這里還需要對(duì)所有圓點(diǎn)設(shè)置被選中的樣式。全選四個(gè)圓點(diǎn)，設(shè)置圓點(diǎn)被選中的的樣式，修改填充顏色添加外部陰影，點(diǎn)擊“確認(rèn)”。

接下來(lái)選中第一個(gè)圓點(diǎn)，選擇“鼠標(biāo)單擊時(shí)”的交互事件，點(diǎn)擊“設(shè)置選中”，選中圓形“1”，設(shè)置值為“ture”。

接著添加“設(shè)置面板狀態(tài)”，選中“輪播圖”動(dòng)作面板，選中狀態(tài)為“state1”，進(jìn)入動(dòng)畫(huà)和退出動(dòng)畫(huà)選擇向左滑動(dòng)”，點(diǎn)擊“確認(rèn)”。

接下來(lái)，再添加“設(shè)置面板狀態(tài)”，選中“輪播圖”動(dòng)作面板，選擇選中狀態(tài)為“停止循環(huán)”，并添加等待動(dòng)作，時(shí)間為5000毫秒。

然后再添加“設(shè)置面板狀態(tài)”，選中“輪播圖”動(dòng)作面板。選擇選中狀態(tài)“Next”、點(diǎn)擊“向后循環(huán)”，進(jìn)入動(dòng)畫(huà)和退出動(dòng)畫(huà)選擇“向左滑動(dòng)”。

因?yàn)辄c(diǎn)擊各圓點(diǎn)需要展示對(duì)應(yīng)的輪播圖，這里復(fù)制“1”的交互事件，粘貼到圓點(diǎn)2、圓點(diǎn)3、圓點(diǎn)4上。

然后點(diǎn)擊圓點(diǎn)“2”，將選中狀態(tài)改為圓點(diǎn)“2”，“輪播圖”動(dòng)作面板的選擇狀態(tài)修改為state2，其他設(shè)置保持不變，然后再點(diǎn)擊圓點(diǎn)3，將選中狀態(tài)改為圓點(diǎn)“3”，“輪播圖“動(dòng)作面板的選擇狀態(tài)改為state3，其他設(shè)置保持不變，以此類推。修改好后。

我們預(yù)覽看下效果，可以看到點(diǎn)擊切換輪播圖效果已經(jīng)完成了。

但是這里我們可以看到當(dāng)選擇一個(gè)圓點(diǎn)后，后面選擇其他圓點(diǎn)，之前選擇的圓點(diǎn)還處于選中狀態(tài)。這個(gè)問(wèn)題我們?cè)撊绾谓鉀Q呢？

回到頁(yè)面中，首先選擇所有圓點(diǎn)，設(shè)置選擇組名稱為“圓點(diǎn)2”。這樣就達(dá)到了單選互斥的效果。接下來(lái)我們預(yù)覽看下效果，可以看到當(dāng)選中一個(gè)圓點(diǎn)后，其他圓點(diǎn)自動(dòng)進(jìn)入到未選中狀態(tài)，這樣效果就完成了。

現(xiàn)在還剩最后一個(gè)問(wèn)題？當(dāng)圖片輪播時(shí)圓點(diǎn)選中狀態(tài)并不會(huì)隨著變化，這個(gè)問(wèn)題我們看下如何解決？

回到頁(yè)面，單擊“輪播圖”動(dòng)態(tài)面板，選擇“狀態(tài)改變時(shí)”的交互事件，點(diǎn)擊“設(shè)置選中”，選中“圓點(diǎn)1”，設(shè)置選中狀態(tài)值為“true”。

然后再點(diǎn)擊“編輯條件”，設(shè)置面板狀態(tài) this=狀態(tài) state1，設(shè)置好后。

接下來(lái)，設(shè)置當(dāng)圖片輪播到第二張、第三張、第四張時(shí)，對(duì)應(yīng)圓點(diǎn)2、3、4將變成選中狀態(tài)。

在“狀態(tài)改變時(shí)”的交互事件中可以再?gòu)?fù)制粘貼三個(gè)條件，并修改條件2的面板狀態(tài) this為狀態(tài) state2、對(duì)應(yīng)修改選中狀態(tài)為圓點(diǎn)2；然后再修改條件3的面板狀態(tài) this為狀態(tài) state3，對(duì)應(yīng)修改選中狀態(tài)為圓點(diǎn)3。以此類推，修改好后。

我們看下預(yù)覽效果，圖片輪播時(shí)圓點(diǎn)選中狀態(tài)會(huì)跟著變化，這樣效果實(shí)現(xiàn)了。

以上就是本次教程的全部?jī)?nèi)容，那我們下期再見(jiàn)啦！