動態面板在axure裡經常被使用到，它是一個多層容器。舉例來說，好比一本書有很多頁面，每一個頁面（層）放不同內容，他可以與其它元件組合使用，實現動態切換改變狀態的效果。

先看下預覽效果：

Step1。 準備圖片素材

以人人都是產品經理的輪播圖為例，可以使用谷瀏覽器，右擊你要的圖片，選擇“檢查”功能，在程式碼區複製你需要的圖片地址，就可以開啟下載（其他方式的隨意）

Step2。 元件排布與樣式設定

1。 拖入基礎元件

如下圖，拖入準備好的圖片素材，拖入文字元件和三個矩形（水平分佈好）。

2。 設定元件樣式

設定大圖樣式，圓角為10；

全選下方三個矩形，設定樣式圓角為80，透明度為70%，並設定其互動樣式，選中時狀態填充顏色為白色，透明度100%。

3。 建立動態面板

全選所有元件，右擊-轉換為動態面板：

4。 複製多層動態面板

雙擊動態面板，給動態面板命名，點選複製按鈕，複製出三層面板：

5。 編輯多層動態面板

雙擊state2，編輯state2內容，將圖片文字替換，右擊第二個小橫條，將其設定為選中狀態，同理完成state3的編輯，並對state1中第一個小橫條進行預設選中，這時候已經完成整個動態面板的樣式。

6。 新增左右箭頭

如圖，新增左右箭頭（可以是圖片，也可以自己做），將其設定為預設隱藏，這時候完成了所有元件的設定與排布。

Step3。 互動效果設定

1。 設定面板自由輪播

因為頁面進入時，就開始輪播，所以互動觸發條件為“載入時”，點中動態面板，設定載入時事件如下，迴圈播放面板。

2。 設定滑鼠移入面板時顯示左右箭頭，移出動態面板時隱藏左右箭頭

常見的錯誤做法是：直接點輪播圖面板，事件如下圖，這種做法會導致滑鼠移入時，確實是顯示了左右箭頭，但是滑鼠要移動左右箭頭時，左右箭頭會狂閃或隱藏（因為你在滑鼠移入左右箭頭時，就是滑鼠移出輪播圖的時候，這時候會觸發隱藏左右箭頭的事件）。

正確的做法是：將左右箭頭與輪播圖全選，右擊轉為一個新的大面板，滑鼠移入大面板時，顯示左右箭頭，滑鼠移出大面板時，隱藏左右箭頭。

3。 點選左右箭頭，切換動態面板狀態

點選左箭頭，設定點選時，輪播圖面板為下一狀態，同理設定右箭頭點選時，輪播圖面板為上一狀態。

Step4。 干擾修正

以上的操作，實際預覽會產生一個問題，就是當點選箭頭切換後，輪播圖不會再自動輪播，因為點選箭頭後，會中斷輪播圖自身“載入時”自動播放下一個的事件，效果如下：

修正做法：點選輪播圖，將輪播圖面板“載入時”事件，複製到輪播圖面板“狀態改變時”事件即可，事件如下：

以上操作，即完成了整個輪播圖效果，預覽效果：

有想要做的效果可以留言，如果我會做，可以下次出教程～

本文由 @五月 原創釋出於人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基於CC0協議