中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

所需元件

一個轉換為動態面板的矩形并命名為輪播圖：

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

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

三個橢圓并給橢圓對應編號1,2,3：

操作步驟

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

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

（3）為動態面板設置第一個交互動作——載入時，使其自動輪播。

（4）看看效果

到這一步我們已經實現了輪播圖的自動輪播，但是橢圓元件還只是擺設作用，接下來讓我們為橢圓也加入交互。

（5）將三個橢圓放到一個選項組內

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

這里選項組的作用是保證這三個橢圓當有一個是選中狀態時，其他兩個都將是非選中狀態。

（6）為每個橢圓設置相應的交互動作——鼠標單擊時，以及交互樣式——選中

1）橢圓1：

交互動作：

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

交互樣式：

2）橢圓3：

交互動作：

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

交互樣式：

與橢圓1相同。

3）橢圓2：

交互動作：

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

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

交互樣式：

與橢圓1相同。

4）動態面板：

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

（7）再看看效果：

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

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

小記

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

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

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

本文由 @Nilz 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash ，基于 CC0 協議