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

我們在瀏覽網站時經常會看到圖片輪播效果，那么，這個效果如何用Axure實現呢？

很多網站都會用到圖片輪播，在原型設計中相信很多人都會用到，本和大家分享一下用動態面板實現圖片輪播的效果。原型預覽效果如下：

交互事件分析

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

頁面概要

1個動態面板：動態面板需新增4個面板，每個面板設置對應的輪播內容（本文用不同顏色的矩形代替）；

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

4個橢圓形：點擊后切換到對應的面板。

交互說明

1. 動態面板設置

雙擊動態面板，點擊“添加”按鈕新增面板，并在每個面板添加對應輪播內容：

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

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

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

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

3. 設置圖片自動輪播

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

頁面載入時動態面板輪播事件：

選擇狀態：Next，面板切換到下一個面板；

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

循環間隔：每張面板停留事件；

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

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

動態面板輪播判斷動態面板輪播到第幾個面板：

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

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

配置好后，預覽原型圖圖片自動輪播就設置好啦~

4. 設置手動切換圖片

設置上一頁按鈕：

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

在事件中選擇“設置面板狀態”動作，選擇動態面板：

選擇狀態：Previous，面板切換到上一個面板；

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

設置下一頁按鈕：

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

在事件中選擇“設置面板狀態”動作，選擇動態面板：

選擇狀態：Next，面板切換到下一個面板；

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

5. 橢圓形頁碼點擊設置

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

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

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

6. 圖片輪播停止及恢復

當鼠標移入輪播區域時，圖片要停止輪播，顯示上一頁、下一頁按鈕；當鼠標移除輪播區域時，圖片恢復輪播并隱藏上一頁、下一頁按鈕?？梢詫⑺胁考O置為一個組合，在組合的“鼠標移入時”、“鼠標移出時”添加事件：

源文件下載地址：

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

提取碼：98q2

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

題圖來自Unsplash，基于CC0協議