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

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

交互事件分析

圖片輪播最主要的交互事件是自動切換及點擊時手動切換，事件分析如下：

頁面概要

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

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

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

交互說明

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

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

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

選中4個橢圓形，鼠標右鍵在菜單中選擇“交互樣式…”菜單：

選擇“選中”選項卡，選擇“填充顏色”：

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

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

動態(tài)面板在頁面載入時就開始自動輪播，鼠標點擊頁面選擇“頁面載入時”事件：

頁面載入時動態(tài)面板輪播事件：

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

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

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

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

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

動態(tài)面板輪播判斷動態(tài)面板輪播到第幾個面板：

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

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

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

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

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

選中“上一頁”矩形，選中“鼠標單擊時”事件：

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

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

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

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

選中“下一頁”矩形，選中“鼠標單擊時”事件：

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

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

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

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

選擇第一個橢圓形，選擇“鼠標單擊時”事件：

鼠標點擊時需要將動態(tài)面板切換到對應(yīng)的頁面，第一個橢圓形切換到第一個面板，第二個橢圓形切換到第二個頁碼，以此類推：

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

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

當鼠標移入輪播區(qū)域時，圖片要停止輪播，顯示上一頁、下一頁按鈕；當鼠標移除輪播區(qū)域時，圖片恢復(fù)輪播并隱藏上一頁、下一頁按鈕。可以將所有部件設(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é)議