筆者在本文中介紹了如何用Axure動態(tài)面板實現(xiàn)輪播圖效果的操作步驟，與大家分享。

所需元件

一個轉(zhuǎn)換為動態(tài)面板的矩形并命名為輪播圖：

這里要記得把“自動調(diào)整為內(nèi)容尺寸”勾選取消掉，方便后面調(diào)整圖片大小。

三張圖片并給圖片編號1、2、3：

三個橢圓并給橢圓對應(yīng)編號1,2,3：

操作步驟

（1）建立三個面板并分別命名為“圖1”、“圖2”、“圖3”

（2）將三張圖分別放到三個面板下

（3）為動態(tài)面板設(shè)置第一個交互動作——載入時，使其自動輪播。

（4）看看效果

到這一步我們已經(jīng)實現(xiàn)了輪播圖的自動輪播，但是橢圓元件還只是擺設(shè)作用，接下來讓我們?yōu)闄E圓也加入交互。

（5）將三個橢圓放到一個選項組內(nèi)

按住Ctrl鍵并用鼠標(biāo)分別點擊三個橢圓，在“設(shè)置選項組名稱”里填入group。

這里選項組的作用是保證這三個橢圓當(dāng)有一個是選中狀態(tài)時，其他兩個都將是非選中狀態(tài)。

（6）為每個橢圓設(shè)置相應(yīng)的交互動作——鼠標(biāo)單擊時，以及交互樣式——選中

1）橢圓1：

交互動作：

這里需要注意，因為圖1在最左邊，所以“進入動畫”是“向右滑動”。

交互樣式：

2）橢圓3：

交互動作：

圖3在最右邊，所以“進入動畫”是“向左滑動”。

交互樣式：

與橢圓1相同。

3）橢圓2：

交互動作：

因為橢圓2處于中間，所以我們需要增加判斷條件：

最終橢圓2的交互動作為：

交互樣式：

與橢圓1相同。

4）動態(tài)面板：

我們再為動態(tài)面板交互動作——載入時，增加一個橢圓1狀態(tài)為選中。

（7）再看看效果：

（8）當(dāng)我們點擊了橢圓時，會發(fā)現(xiàn)輪播圖的自動輪播效果沒了，如果想要實現(xiàn)點擊橢圓后輪播圖繼續(xù)輪播只需要再在每個橢圓的交互動作后面增加動作：

到這里我們的輪播圖就完成啦！?(?‘ω’?)??get！

小記

（1）這里我們用到了動態(tài)面板的又一種用途——輪播圖。如果想知道動態(tài)面板的另一種用途——密碼可見性切換，可以看我的另一篇文章：http://theventurebank.com/rp/3126520.html

（2）輪播圖實現(xiàn)起來不難，但是主要考驗我們對于項目中每個元件的命名的嚴(yán)謹(jǐn)準(zhǔn)確，否則很容易就會把橢圓對應(yīng)的圖片弄混，比如點擊第一個橢圓卻跳到了第三張圖…這個項目還只是一個案例，里面的元件非常少，只有十個不到。

然而當(dāng)我們制作一個較大的原型時，項目里面的元件少說也有上百個，當(dāng)你從一開始沒有養(yǎng)成給每個元件命好名的習(xí)慣的話，后面再去梳理將會是一件非常麻煩的事情，也不便于后面查看你的項目的人的查閱。血的教訓(xùn)o(╯□╰)o，所以切記從一開始就為每個添加的元件命好名！

本文由 @Nilz 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議