Axure教程:使用動態(tài)面板實現(xiàn)輪播圖

3 評論 5168 瀏覽 23 收藏 7 分鐘

筆者在本文中介紹了如何用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é)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. axure9“當(dāng)我們點擊了橢圓時,會發(fā)現(xiàn)輪播圖的自動輪播效果沒了,如果想要實現(xiàn)點擊橢圓后輪播圖繼續(xù)輪播只需要再在每個橢圓的交互動作后面增加動作:”這個該如何實現(xiàn)呢

    來自江蘇 回復(fù)
  2. 學(xué)習(xí)了!

    來自廣東 回復(fù)
    1. nice(??????)??

      來自廣東 回復(fù)