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

所需元件

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

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

三張圖片并給圖片編號(hào)1、2、3：

三個(gè)橢圓并給橢圓對(duì)應(yīng)編號(hào)1,2,3：

操作步驟

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

（2）將三張圖分別放到三個(gè)面板下

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

（4）看看效果

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

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

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

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

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

1）橢圓1：

交互動(dòng)作：

這里需要注意，因?yàn)閳D1在最左邊，所以“進(jìn)入動(dòng)畫”是“向右滑動(dòng)”。

交互樣式：

2）橢圓3：

交互動(dòng)作：

圖3在最右邊，所以“進(jìn)入動(dòng)畫”是“向左滑動(dòng)”。

交互樣式：

與橢圓1相同。

3）橢圓2：

交互動(dòng)作：

因?yàn)闄E圓2處于中間，所以我們需要增加判斷條件：

最終橢圓2的交互動(dòng)作為：

交互樣式：

與橢圓1相同。

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

我們?cè)贋閯?dòng)態(tài)面板交互動(dòng)作——載入時(shí)，增加一個(gè)橢圓1狀態(tài)為選中。

（7）再看看效果：

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

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

小記

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

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

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

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

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

者： 夢(mèng)里夢(mèng)中夢(mèng)

轉(zhuǎn)發(fā)鏈接：https://mp.weixin.qq.com/s/6J0uJKaC4SPlt2h7oeSP-Q