本文作者分享自己做過的一個PC端的高保真原型，來教大家，如何在動態(tài)面板里面設(shè)置圖片的自動和手動的切換。

給大家分享自己做過的一個案例，來自于去年自己做的一個PC端高保真原型。

案例描述

固定區(qū)域循環(huán)一組圖片（幻燈片效果），條形分頁標簽隨著播放不同的圖片，而對應(yīng)改變樣式。

元件準備

從元件庫中拖出一個動態(tài)面板，我們給它命名為 Banner ，里面同樣添加1+N個狀態(tài)，每個狀態(tài)里放同樣大小的圖片（記得位置要統(tǒng)一）。

同樣的條形標簽我們按照上面的做一下，第一個狀態(tài)的第一個為選中，往下遞增下去。（ 這方法可能有點蠢，但設(shè)置交互屬性的時候比較方便，其中也包含了個人習慣 ）。

這樣大致就做好了，接下我們開始下一步。

思路分析

1. 利用動態(tài)面板可添加多個狀態(tài)的特性，我創(chuàng)建了 6 個狀態(tài)；
2. 將 6 張圖需要展示的圖片放到各個狀態(tài)里面；
3. 將條形標簽做成只能唯一被選中的效果（ 第一個狀態(tài)的第一個為選中 ），其他狀態(tài)遞增下去；
4. 頁面打開后，開啟圖片（ 載入時 ）自動循環(huán)播放的效果，且每次切換新的圖片時，同時切換不同的條形標簽狀態(tài)。

思路基本完善后，下面我們來做一下這個效果。

Banner 動態(tài)面板設(shè)置為之后，條形標簽同樣設(shè)置。這時候我們就能實現(xiàn)出圖片自動切換的效果了，接下來我們可以繼續(xù)優(yōu)化交互體驗 ~

我們給Banner的兩側(cè)各加一個可點擊的按鈕，點擊左側(cè)按鈕（ 向前一個狀態(tài) ），點擊右側(cè)按鈕（ 向后一個狀態(tài) ）。

最后我們加一個鼠標移入移出的交互效果，如圖：

完成（已做完的小伙伴給自己鼓個掌）。

總結(jié)

1. 實現(xiàn)圖片 or 條形標簽自動切換；
2. 實現(xiàn)鼠標移入時停止自動切換，移出即可回復自動切換；
3. 實現(xiàn)點擊兩側(cè)按鈕可手動切換。

今天的分享到此結(jié)束了，有任何意見和建議請在下方留言，我會盡快回復您，謝謝 ??！

本文由 @李桂東 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自網(wǎng)絡(luò)