對于動態面板的使用我想每一個學習axure的小伙伴都會接觸到，聰明的你可能會想，能不能利用動態面板制作出輪播圖的效果能？不用懷疑 ，利用動態面板也是能做出好看的輪播圖的效果的。那么，下邊我就來分享一下使用axure的動態面板制作輪播圖的過程吧。

1.在元件庫Default下找到動態面板 ，將其拖動到頁面中

2.雙擊動態面板進入動態面板的編輯區，點擊狀態區，可展示狀態列表。點擊新增狀態可根據需求增加狀態。

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

4.選中first狀態，將圖像控件拖入狀態面板中，調節調節控件大小后導入圖片

導入圖片

?5.選中second狀態，同樣將圖片控件拉入，調節圖片控件大小后將圖片導入（后邊的third狀態操作同上）

導入圖片

6.當你對動態面板的各個狀態面板設置完畢后，點擊關閉。而后單擊頁面空白處，點擊新建交互。

選擇頁面載入時

選擇設置面板狀態

目標原件選擇動態面板 ，狀態選擇“下一個”（這里也可以選擇“上一個”）并勾選“從最后一個到第一個自動循環”，而后進入時動畫選擇“向左滑動”、時間默認500毫秒（可根據自己的喜好自由設置）。這里要注意的是要在更多選項中勾選“循環時間間隔”并設置好循環時間，不然當頁面加載時它不會自動輪播。當各個選項設置完畢后點擊確定按鈕，完成交互設置。

?

?在交互設置完畢后，點擊預覽，即可在瀏覽器中顯示最初始的輪播圖

lunbo

7.對輪播圖的小圓圈選中樣式進行編輯設置

將橢圓元件拖入頁面中

?按住ctrl鍵挨個點擊各個圓圈將其選中后，右鍵選擇樣式效果，為其設置選中時的樣式效果

8.實現動態面板的狀態何小圓圈的選中聯動。?

首先為動態面板新建交互

選擇動態面板狀態改變時

而后不要做任何選擇，直接點擊頁面空白處，讓交互呈現如下

鼠標移入時會顯示箭頭所指的按鈕，點擊它

?將出現如下頁面

點擊添加邏輯，選擇狀態first后點擊確定?

?在這個邏輯之下添加動作

?如下圖進行原件選擇，選擇完畢后點擊確定按鈕即可完成橢圓1和輪播圖狀態first的關聯。

如果你的橢圓還未曾命名，請看如下操作

?對于剩下的小圈圈的關聯，對于上邊的操作舉一反三即可，這里我再演示second狀態和第二個小圈圈的選中關聯。

(1)

(2)

(3)

?(4)

(5)

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

?

?后邊的第三各個關聯我想聰明可愛的你已經完全學會操作了吧

8.設置默認選中第一個圈圈

9.為了實現三個圈圈之間的互斥，也就是三個圈圈中選中其中一個，其余的圈圈都不選中。其實很簡單，只需將它們三個圈圈加入到一個選擇組中即可。

（1）

?

（2）

（3）完成后點擊確定即可10

?10.最后點擊預覽，即可大功告成！

?

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。