我們在瀏覽網(wǎng)站時(shí)經(jīng)常會(huì)看到圖片輪播效果，那么，這個(gè)效果如何用Axure實(shí)現(xiàn)呢？

很多網(wǎng)站都會(huì)用到圖片輪播，在原型設(shè)計(jì)中相信很多人都會(huì)用到，本和大家分享一下用動(dòng)態(tài)面板實(shí)現(xiàn)圖片輪播的效果。原型預(yù)覽效果如下：

交互事件分析

圖片輪播最主要的交互事件是自動(dòng)切換及點(diǎn)擊時(shí)手動(dòng)切換，事件分析如下：

頁面概要

1個(gè)動(dòng)態(tài)面板：動(dòng)態(tài)面板需新增4個(gè)面板，每個(gè)面板設(shè)置對應(yīng)的輪播內(nèi)容（本文用不同顏色的矩形代替）；

2個(gè)矩形：設(shè)置為“上一頁”、“下一頁”按鈕，點(diǎn)擊后切換面板內(nèi)容；

4個(gè)橢圓形：點(diǎn)擊后切換到對應(yīng)的面板。

交互說明

1. 動(dòng)態(tài)面板設(shè)置

雙擊動(dòng)態(tài)面板，點(diǎn)擊“添加”按鈕新增面板，并在每個(gè)面板添加對應(yīng)輪播內(nèi)容：

2. 橢圓頁面按鈕交互樣式

選中4個(gè)橢圓形，鼠標(biāo)右鍵在菜單中選擇“交互樣式…”菜單：

選擇“選中”選項(xiàng)卡，選擇“填充顏色”：

PS：第一個(gè)橢圓形頁碼需要設(shè)置為選中狀態(tài)，當(dāng)頁面加載時(shí)，默認(rèn)播放的是一張圖片！

3. 設(shè)置圖片自動(dòng)輪播

動(dòng)態(tài)面板在頁面載入時(shí)就開始自動(dòng)輪播，鼠標(biāo)點(diǎn)擊頁面選擇“頁面載入時(shí)”事件：

頁面載入時(shí)動(dòng)態(tài)面板輪播事件：

選擇狀態(tài)：Next，面板切換到下一個(gè)面板；

向后循環(huán)：勾選后，面板切換到最后一張時(shí)，會(huì)自動(dòng)切換到第一張；

循環(huán)間隔：每張面板停留事件；

首個(gè)狀態(tài)延時(shí)：如果不勾選頁面將跳過第一個(gè)面板。

圖片輪播時(shí)需顯示當(dāng)前輪播到第幾個(gè)面板，該事件需在動(dòng)態(tài)面板“狀態(tài)改變時(shí)”事件中配置：

動(dòng)態(tài)面板輪播判斷動(dòng)態(tài)面板輪播到第幾個(gè)面板：

面板輪播到第一個(gè)面板，需選擇第一個(gè)橢圓形頁碼，取消其他頁碼選中狀態(tài)：

鼠標(biāo)雙擊“狀態(tài)改變時(shí)”用例，增加多個(gè)事件用例,設(shè)置面板切換時(shí)，橢圓形頁面選中狀態(tài)：

配置好后，預(yù)覽原型圖圖片自動(dòng)輪播就設(shè)置好啦~

4. 設(shè)置手動(dòng)切換圖片

設(shè)置上一頁按鈕：

選中“上一頁”矩形，選中“鼠標(biāo)單擊時(shí)”事件：

在事件中選擇“設(shè)置面板狀態(tài)”動(dòng)作，選擇動(dòng)態(tài)面板：

選擇狀態(tài)：Previous，面板切換到上一個(gè)面板；

向后循環(huán)：勾選后，面板切換到第一張時(shí)，會(huì)自動(dòng)切換到最后一張。

設(shè)置下一頁按鈕：

選中“下一頁”矩形，選中“鼠標(biāo)單擊時(shí)”事件：

在事件中選擇“設(shè)置面板狀態(tài)”動(dòng)作，選擇動(dòng)態(tài)面板：

選擇狀態(tài)：Next，面板切換到下一個(gè)面板；

向后循環(huán)：勾選后，面板切換到最后一張時(shí)，會(huì)自動(dòng)切換到第一張。

5. 橢圓形頁碼點(diǎn)擊設(shè)置

選擇第一個(gè)橢圓形，選擇“鼠標(biāo)單擊時(shí)”事件：

鼠標(biāo)點(diǎn)擊時(shí)需要將動(dòng)態(tài)面板切換到對應(yīng)的頁面，第一個(gè)橢圓形切換到第一個(gè)面板，第二個(gè)橢圓形切換到第二個(gè)頁碼，以此類推：

點(diǎn)擊時(shí)，除了需要切換動(dòng)態(tài)面板，還需設(shè)置當(dāng)前橢圓形“選中”狀態(tài)，設(shè)置其他橢圓形“取消選中”狀態(tài)：

6. 圖片輪播停止及恢復(fù)

當(dāng)鼠標(biāo)移入輪播區(qū)域時(shí)，圖片要停止輪播，顯示上一頁、下一頁按鈕；當(dāng)鼠標(biāo)移除輪播區(qū)域時(shí)，圖片恢復(fù)輪播并隱藏上一頁、下一頁按鈕?？梢詫⑺胁考O(shè)置為一個(gè)組合，在組合的“鼠標(biāo)移入時(shí)”、“鼠標(biāo)移出時(shí)”添加事件：

源文件下載地址：

鏈接：https://pan.baidu.com/s/1GgSXN6BZMF8TaGWc-Iyjcw

提取碼：98q2

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

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