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

不管是在PC端還是移動端，輪播圖是常見的設(shè)計元素，一般產(chǎn)品的首頁位置都會通過輪播圖的方式來展示重點推薦的內(nèi)容。本文作者介紹了如何用Axure實現(xiàn)輪播圖效果的操作步驟，與大家分享。

案例展示：輪播圖

工具：Axure RP9

一、輪播圖設(shè)計構(gòu)思

二、按部就班，逐個擊破

1. 先畫輪播圖的整體的結(jié)構(gòu)

如下圖：動態(tài)面板（375*195）、圓（3個，10*10）、向左、向右按鈕圖片（40*40）

（1) 動態(tài)面板：給動態(tài)面板每一層面板填充顏色（因為有找圖糾結(jié)癥，哈哈哈）

（2）三個圓（專業(yè)術(shù)語：指示器）：圓設(shè)置成選項組。（選項組作用：同一個選項組的元件，當(dāng)其中一個部件被選中時，系統(tǒng)會自動取消選擇其他部件。）

操作：同時選中三個圓（圓從左至右分別命名為“槽點1”、“槽點2”、“槽點3”），鼠標右鍵，點擊【設(shè)置選項組】，給選選項組命名后，點擊確定；

依次給每一個圓【添加交互樣式】—【元件選中的樣式】選擇填充顏色。（注：第一個圓點要默認選擇狀態(tài)：“形狀屬性”— 勾選“選中”）

雛形已出，接下就是功能了。

2. 自動輪播

選擇 【動態(tài)面板】 —? 點擊【新建交互】 — 選擇【載入時】— 【設(shè)置面板狀態(tài)】點擊完成就完成了自動輪播的效果了，是不是很簡單。

3. 點擊圓點切換

（1）設(shè)置面板狀態(tài)與圓點的對應(yīng)關(guān)系。? ? ?面板狀態(tài)為輪播圖1時，對應(yīng)圓點1；面板狀態(tài)為輪播圖2時，對應(yīng)圓點2；面板狀態(tài)為輪播圖3時，對應(yīng)圓點3。
點擊輪播面板，在交互中點擊【新建交互】—【狀態(tài)改變時】—【添加情形】，點擊確定。條件狀態(tài)設(shè)置如下：

重復(fù)以上操作兩次，條件為面板狀態(tài)==輪播圖2時，選中圓2；條件為面板狀態(tài)==輪播圖3時，選中圓3。如下圖：

（2）點擊圓點時展示對應(yīng)圖片，以及圖片進入、退出動畫方式的設(shè)置。點擊圓1，在交互中選擇【新建交互】，【單擊時】，【設(shè)置面板狀態(tài)】，選擇輪播圖1和動畫方式。如下圖：

只有上面運行預(yù)覽你會發(fā)現(xiàn)點擊之后輪播圖會不循環(huán)了，what？所以，點擊圓點出現(xiàn)對應(yīng)圖片后，還需要循環(huán)展示圖片的動作，所以還需加上以下步驟：

選中圓1，點擊【添加動作】點擊【設(shè)置面板】，選擇【下一項】狀態(tài),設(shè)置循環(huán)效果，如下圖：

對圓2、圓3進行同樣的動作設(shè)置（圓2選擇狀態(tài)為輪播圖2，圓3選擇狀態(tài)為輪播圖3）

4. 左右切換

（1）點擊向左按鈕時，展示前一張圖片。如果當(dāng)前圖片為第一張輪播圖，則點擊向左，出現(xiàn)第三張輪播圖

選中向左的元件，【新建交互】，【單擊時】，【添加情形】在情形下【添加動作】【設(shè)置面板狀態(tài)】如下：

和上面的圓點設(shè)置一樣，要注意的是在點擊切換完成了，還需要繼續(xù)循環(huán)展示，所以需要繼續(xù)【添加動作】、【設(shè)置面板狀態(tài)】如下：

（2）其他兩個情形思路和向右切換的思路也是一樣設(shè)置，如圖下：

5. 左右滑動切換

這個左右滑動切換和點擊上下切換，的區(qū)別只是，【新建交互】對動態(tài)面板【向左拖動結(jié)束時】和【向右拖動結(jié)束時】，思路一樣，直接貼圖了哈。

設(shè)置完上面的，就可以在Axure中完成輪播圖的制作啦。點擊預(yù)覽，即可看到輪播圖的效果了~

可以保存好，當(dāng)母版，方便以后快速運用額。

參考鏈接：

https://www.jianshu.com/p/628a22c1f653

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

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