編輯導語：圖片輪播是各大網站常常見到的形式，本文作者今天帶領大家坦探討進階的輪播圖的實現效果，例如輪播進度指示、快速跳轉、鼠標移入暫停輪播等等，希望看後對你有所啓發。
準備：Axure 8（或Axure 9）軟件已安裝，掌握基本的軟件使用。
本教程知識點：
- 初級的動態面板使用；
- 初級的頁面交互事件、元件交互事件使用：鼠標移入移除、動態面板狀態切換；
- 圖片元件、矩形、SVG圖標等元件使用。
- 鼠標移入暫停輪播、鼠標移除繼續輪播；
- 點擊切換上一張輪播圖、點擊切換下一張輪播圖；
- 輪播圖與小標同步、小標點擊跳轉。
以三張輪播為例，使用Axure 8為例：
進階輪播圖主要為了適配PC端的操作，加入了指定的輪播圖頁面切換；鼠標移動停止輪播，移出繼續輪播；手動切換上下輪播圖。
1. 製作基礎的輪播圖2. 製作同等動態頁面狀態的輪播圖小標結合內容輪播圖的順序給每個狀態製作進度排序，使其輪播圖小標的狀態與內容輪播圖頁面一一匹配。
可以通過形狀+SVG圖標實現。
透明狀態實現：填充形狀為純色（純白：#FFFFFF），設置透明度為：30%。
1）輪播圖同步動起來
- 內容輪播圖頁面切換+右下部小標切換；
- 在頁面層級配置頁面載入的動態面版的交互（注：需要同時配置兩個動態面板交互）；
- 選擇兩個動態面板模式：向後循環（Next）；
- 勾選兩個動態面本向後循環（若未勾選向後循環，動態面板只會切換一個狀態）；
- 勾選循環間隔時間（系統默認1000毫秒（1秒=1000毫秒），日常中基本設置為3000–5000之間）；
- 勾引首個狀態延時（勾選後，第一張輪播展示對應時間後，才進行加載第二張；若不勾選，第一張會一閃而過）；
- 動畫：緩解動態版本切換的生硬。
動畫只需在內容動態面板上配置，小標動態面板無需配置；方向根據實際效果選擇（一般常用向左滑動）；動畫過渡時間，同樣是緩解切換的生硬效果。
2）設置小標點擊後跳轉對應的頁面
- 每個狀態的小標中的按鈕都需要添加交互事件；
- 設置狀態需同步（注：點擊第一個，切換小標為小標1、切換內容輪播圖為輪播圖狀態1）；
技巧：統一製作一個小標狀態，然後進行復制，複製後對應的調整小標內容的排版佈局，這樣就可以保證整個交互不會錯亂和丟失（如果採用每個頁面單獨製作交互，就需要注意，當輪播圖狀態越多，製作小標的交互需要更細心）。
3）設置左右按鈕點擊切換（以左切換為例）
- 設置按鈕點擊事件
- 點擊後切換內容動態面板、小標為上一個。
- 向前循環：勾選向前循環（若不勾選向前循環，在動態面板切換至第一個後，將無法再次向前切換）（注：右按鈕為向後循環勾選）。
- 注：Next（下一個）、Previous（上一個）。
- 配置完成點擊事件後，進行左右切換其實狀態的隱藏展示（設置隱藏狀態，只在鼠標移入輪播圖後進行展示切換按鈕）。
4）配置鼠標移除輪播圖暫停、鼠標移出輪播圖繼續
- 鼠標移入，設置內容輪播圖和小標輪播圖狀態為停止循環。
- 鼠標移入，設置左右切換按鈕為顯示。
- 鼠標移出，設置內容輪播圖和小標輪播圖狀態為向後循環（配置通頁面的輪播圖動起來）。
5）隱藏左右按鈕
設置當動態面板變化時，隱藏左右按鈕（添加觸發條件，當指針未接觸內容輪播圖（簡單理解為鼠標移出內容輪播圖）。
- 注意交互的先後順序，尤其在鼠標移入移出內容輪播圖時；
- 遇到交互衝突，可以嘗試添加觸發條件進行避免衝突；
- 注意細節，尤其是小標動態面板的交互；
- 最後一點：老生常談，注意命名（高保真想要做的好，命名不可少）。
本文由 @Brose 原創發佈於人人都是產品經理，未經許可，禁止轉載
題圖來自 Pexels，基於 CC0 協議