Axure怎么使用動(dòng)態(tài)面板制作banner圖片輪播?

發(fā)布時(shí)間：2017-06-30 17:49:16 作者：佚名

我要評(píng)論

Axure怎么使用動(dòng)態(tài)面板制作banner圖片輪播？Axure中想要做一個(gè)網(wǎng)站banner圖片輪播，該怎么制作這個(gè)效果呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下

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

原型設(shè)計(jì)工具Axure RP Pro 8.1特別版中文漢化特別版(附漢化包+注冊(cè)碼+安裝教程)

類型：輔助設(shè)計(jì)
大?。?/span>90.5MB
語言：簡體中文
時(shí)間：2018-05-24

查看詳情

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

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

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

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

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

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

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

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

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

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

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

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

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

相關(guān)推薦：

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

Axure 8.0中怎么制作手機(jī)上下滑動(dòng)效果?

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