Axure就不多介紹了，一般對產(chǎn)品崗位比較了解的都知道，常用的原型工具。這里為大家做一個用動態(tài)面板做簡單的banner圖片輪播的方法。

一、基礎(chǔ)準(zhǔn)備工作

1、打開Axure，頁面名稱命名為“圖片輪播”；在左側(cè)部件（線框圖）中，選擇動態(tài)面板，左鍵選中，并按住左鍵，拖動其至工作臺頁面中，如圖，在上方菜單欄將寬調(diào)整為400，高為200（寬高根據(jù)個人需求來自行設(shè)置）

2、雙擊建立的動態(tài)面板，彈出“動態(tài)面板狀態(tài)管理”窗口。給當(dāng)前動態(tài)面板起名字為“圖片輪播”；在面板狀態(tài)區(qū)域，點擊“+”增加狀態(tài)，需要有幾個圖片輪播，建立幾個狀態(tài)，在每個狀態(tài)上，右鍵，可重命名，當(dāng)前我們做三個圖片輪播的，命名為“圖1”“圖2“”圖3“。完成后，點擊窗口的確定按鈕。

3、在右側(cè)窗口下方“部件管理”，雙擊動態(tài)面板的狀態(tài)“圖1”；（注意，如果看不到部件管理，可以在菜單欄的“視圖”-“面板”設(shè)置）；在左側(cè)的“部件”，左鍵選中并拖動一個“圖片”放置于當(dāng)前的工作窗口中。

4、雙擊圖片的圖標(biāo)，彈出選擇圖片的路徑框，這里大家選擇需要輪播的圖片就可以了，將圖片選中后確認(rèn)即可在工作臺窗口打開圖片；這里需要大家注意，如果圖片的邊緣位于當(dāng)前狀態(tài)框（虛線）的外面，需要拖動當(dāng)前圖片到虛線內(nèi)，或者過大的需要裁剪（選中圖片，右鍵可裁剪圖片），或者調(diào)整圖片大小，能將圖片放置于虛線框內(nèi)，否則完成后的原型會無法顯示全等問題。

5、設(shè)置完成圖1后，我們需要用同樣的方法設(shè)置圖2和圖3，這里不細(xì)說了

6、三個圖片均設(shè)置完成后，點擊左側(cè)上方的“圖片輪播“頁面，返回主頁面，這里我們可以看到之前的動態(tài)面板已經(jīng)默認(rèn)顯示圖1的圖片了。

二、圖片輪播的動態(tài)面板設(shè)置步驟

1、選中動態(tài)工作頁面的動態(tài)面板，在右側(cè)“部件交互和注釋”的“載入時”右鍵，選擇“新增用例”，彈出窗口“用例編輯器”

2、在“用例編輯器”窗口“動態(tài)面板”，選擇設(shè)置面板狀態(tài)。

3、在第四步“配置動作”，選中“設(shè)置圖片輪播”，前面會表示√，表示選中；在“選中狀態(tài)”選擇“next”（表示正序輪播）previous（表示倒敘輪播）；并選中下面的“從最后一個到第一個自動循環(huán)”（這樣才能實現(xiàn)一直輪播）；可以選擇循環(huán)間隔時間，亦可以默認(rèn)不設(shè)置。

4、進(jìn)入時，退出時的動畫可以根據(jù)需求自行設(shè)置，我這里選擇了一個進(jìn)入時，向右滑動，完成后，點擊確定按鈕。

5、可以F5預(yù)覽，或者生成原型文件，部分瀏覽器不支持的，建議大家默認(rèn)IE。ok了，完成。

相關(guān)推薦：

Axure RP 8怎么創(chuàng)建圖形母板?

Axure 8.0中怎么制作手機上下滑動效果?

Axure RP 8怎么設(shè)置控制多選列表傳值的效果?