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

給大家分享自己做過(guò)的一個(gè)案例，來(lái)自于去年自己做的一個(gè)PC端高保真原型。

案例描述

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

元件準(zhǔn)備

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

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

這樣大致就做好了，接下我們開(kāi)始下一步。

思路分析

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

思路基本完善后，下面我們來(lái)做一下這個(gè)效果。

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

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

最后我們加一個(gè)鼠標(biāo)移入移出的交互效果，如圖：

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

總結(jié)

1. 實(shí)現(xiàn)圖片 or 條形標(biāo)簽自動(dòng)切換；
2. 實(shí)現(xiàn)鼠標(biāo)移入時(shí)停止自動(dòng)切換，移出即可回復(fù)自動(dòng)切換；
3. 實(shí)現(xiàn)點(diǎn)擊兩側(cè)按鈕可手動(dòng)切換。

今天的分享到此結(jié)束了，有任何意見(jiàn)和建議請(qǐng)?jiān)谙路搅粞?，我?huì)盡快回復(fù)您，謝謝 ??！

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

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