對(duì)于動(dòng)態(tài)面板的使用我想每一個(gè)學(xué)習(xí)axure的小伙伴都會(huì)接觸到，聰明的你可能會(huì)想，能不能利用動(dòng)態(tài)面板制作出輪播圖的效果能？不用懷疑 ，利用動(dòng)態(tài)面板也是能做出好看的輪播圖的效果的。那么，下邊我就來(lái)分享一下使用axure的動(dòng)態(tài)面板制作輪播圖的過(guò)程吧。

1.在元件庫(kù)Default下找到動(dòng)態(tài)面板 ，將其拖動(dòng)到頁(yè)面中

2.雙擊動(dòng)態(tài)面板進(jìn)入動(dòng)態(tài)面板的編輯區(qū)，點(diǎn)擊狀態(tài)區(qū)，可展示狀態(tài)列表。點(diǎn)擊新增狀態(tài)可根據(jù)需求增加狀態(tài)。

3.下邊我所要制作的輪播圖包含三張圖片，所以我需要有三個(gè)狀態(tài)，對(duì)于每個(gè)狀態(tài)我們還可以對(duì)它進(jìn)行命名。（這里建議命名，方便后期操作中對(duì)各個(gè)狀態(tài)進(jìn)行辨別）

4.選中first狀態(tài)，將圖像控件拖入狀態(tài)面板中，調(diào)節(jié)調(diào)節(jié)控件大小后導(dǎo)入圖片

導(dǎo)入圖片

?5.選中second狀態(tài)，同樣將圖片控件拉入，調(diào)節(jié)圖片控件大小后將圖片導(dǎo)入（后邊的third狀態(tài)操作同上）

導(dǎo)入圖片

6.當(dāng)你對(duì)動(dòng)態(tài)面板的各個(gè)狀態(tài)面板設(shè)置完畢后，點(diǎn)擊關(guān)閉。而后單擊頁(yè)面空白處，點(diǎn)擊新建交互。

選擇頁(yè)面載入時(shí)

選擇設(shè)置面板狀態(tài)

目標(biāo)原件選擇動(dòng)態(tài)面板 ，狀態(tài)選擇“下一個(gè)”（這里也可以選擇“上一個(gè)”）并勾選“從最后一個(gè)到第一個(gè)自動(dòng)循環(huán)”，而后進(jìn)入時(shí)動(dòng)畫(huà)選擇“向左滑動(dòng)”、時(shí)間默認(rèn)500毫秒（可根據(jù)自己的喜好自由設(shè)置）。這里要注意的是要在更多選項(xiàng)中勾選“循環(huán)時(shí)間間隔”并設(shè)置好循環(huán)時(shí)間，不然當(dāng)頁(yè)面加載時(shí)它不會(huì)自動(dòng)輪播。當(dāng)各個(gè)選項(xiàng)設(shè)置完畢后點(diǎn)擊確定按鈕，完成交互設(shè)置。

?

?在交互設(shè)置完畢后，點(diǎn)擊預(yù)覽，即可在瀏覽器中顯示最初始的輪播圖

lunbo

7.對(duì)輪播圖的小圓圈選中樣式進(jìn)行編輯設(shè)置

將橢圓元件拖入頁(yè)面中

?按住ctrl鍵挨個(gè)點(diǎn)擊各個(gè)圓圈將其選中后，右鍵選擇樣式效果，為其設(shè)置選中時(shí)的樣式效果

8.實(shí)現(xiàn)動(dòng)態(tài)面板的狀態(tài)何小圓圈的選中聯(lián)動(dòng)。?

首先為動(dòng)態(tài)面板新建交互

選擇動(dòng)態(tài)面板狀態(tài)改變時(shí)

而后不要做任何選擇，直接點(diǎn)擊頁(yè)面空白處，讓交互呈現(xiàn)如下

鼠標(biāo)移入時(shí)會(huì)顯示箭頭所指的按鈕，點(diǎn)擊它

?將出現(xiàn)如下頁(yè)面

點(diǎn)擊添加邏輯，選擇狀態(tài)first后點(diǎn)擊確定?

?在這個(gè)邏輯之下添加動(dòng)作

?如下圖進(jìn)行原件選擇，選擇完畢后點(diǎn)擊確定按鈕即可完成橢圓1和輪播圖狀態(tài)first的關(guān)聯(lián)。

如果你的橢圓還未曾命名，請(qǐng)看如下操作

?對(duì)于剩下的小圈圈的關(guān)聯(lián)，對(duì)于上邊的操作舉一反三即可，這里我再演示second狀態(tài)和第二個(gè)小圈圈的選中關(guān)聯(lián)。

(1)

(2)

(3)

?(4)

(5)

(6)?選擇完畢后點(diǎn)擊確定即可

?

?后邊的第三各個(gè)關(guān)聯(lián)我想聰明可愛(ài)的你已經(jīng)完全學(xué)會(huì)操作了吧

8.設(shè)置默認(rèn)選中第一個(gè)圈圈

9.為了實(shí)現(xiàn)三個(gè)圈圈之間的互斥，也就是三個(gè)圈圈中選中其中一個(gè)，其余的圈圈都不選中。其實(shí)很簡(jiǎn)單，只需將它們?nèi)齻€(gè)圈圈加入到一個(gè)選擇組中即可。

（1）

?

（2）

（3）完成后點(diǎn)擊確定即可10

?10.最后點(diǎn)擊預(yù)覽，即可大功告成！

?

?

總結(jié)

以上是生活随笔為你收集整理的Axure使用动态面板制作轮播图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。