起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure教程：在動態面板里面設置圖片自動/手動切換
本文作者分享自己做過的一個PC端的高保真原型，來教大家，如何在動態面板里面設置圖片的自動和手動的切換。
給大家分享自己做過的一個案例，來自于去年自己做的一個PC端高保真原型。
案例描述
固定區域循環一組圖片（幻燈片效果），條形分頁標簽隨著播放不同的圖片，而對應改變樣式。
元件準備
從元件庫中拖出一個動態面板，我們給它命名為 Banner ，里面同樣添加1+N個狀態，每個狀態里放同樣大小的圖片（記得位置要統一）。
同樣的條形標簽我們按照上面的做一下，第一個狀態的第一個為選中，往下遞增下去。（ 這方法可能有點蠢，但設置交互屬性的時候比較方便，其中也包含了個人習慣 ）。
這樣大致就做好了，接下我們開始下一步。
思路分析
- 利用動態面板可添加多個狀態的特性，我創建了 6 個狀態；
- 將 6 張圖需要展示的圖片放到各個狀態里面；
- 將條形標簽做成只能唯一被選中的效果（ 第一個狀態的第一個為選中 ），其他狀態遞增下去；
- 頁面打開后，開啟圖片（ 載入時 ）自動循環播放的效果，且每次切換新的圖片時，同時切換不同的條形標簽狀態。
思路基本完善后，下面我們來做一下這個效果。
Banner 動態面板設置為之后，條形標簽同樣設置。這時候我們就能實現出圖片自動切換的效果了，接下來我們可以繼續優化交互體驗 ~
我們給Banner的兩側各加一個可點擊的按鈕，點擊左側按鈕（ 向前一個狀態 ），點擊右側按鈕（ 向后一個狀態 ）。
最后我們加一個鼠標移入移出的交互效果，如圖：
完成（已做完的小伙伴給自己鼓個掌）。
總結
- 實現圖片 or 條形標簽自動切換；
- 實現鼠標移入時停止自動切換，移出即可回復自動切換；
- 實現點擊兩側按鈕可手動切換。
今天的分享到此結束了，有任何意見和建議請在下方留言，我會盡快回復您，謝謝 ??！
本文由 @李桂東 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自網絡
產品小白
評論
能分享個rp文件嗎？左右移動的按鈕實在搞不掂
hello,請問，我添加左右按鈕后，當鼠標移動按鈕位置，按鈕是一閃一閃的？我估計是圖層的問題？按鈕在頂層，banner在底層？
這樣操作，當鼠標移入Banner后，再移到切換按鈕上，會出現bug。
感謝您的指點，我又去實操了幾次效果…
切換按鈕是和其他所有內容一起包含在動態面板里面，移入移出是設置在該動態面板上面的。
移入時只能手動點擊輪播，移出才恢復自動輪播，這個我嘗試過沒有為問題。您指的是這個問題嗎？
嗯嗯，再套一個動態面板，就沒這問題了。