編輯導語：圖片輪播是各大網站常常見到的形式，本文作者今天帶領大家坦探討進階的輪播圖的實現效果，例如輪播進度指示、快速跳轉、滑鼠移入暫停輪播等等，希望看後對你有所啟發。
準備：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 協議