輪播圖在日常的原型設(shè)計(jì)中是最常見的了，今天和大家分享如何制作自動(dòng)輪播+手工點(diǎn)擊切換。

思路：

• 面載入時(shí)，圖片會(huì)自動(dòng)輪播；
• 點(diǎn)擊下方對應(yīng)的圖片，會(huì)跳轉(zhuǎn)到圖標(biāo)對應(yīng)的界面；
• 點(diǎn)擊左右按鈕，既可朝左朝右有順序的翻動(dòng)界面。

下面正式開始：

1. 所需組件，自己想做啥就做啥，不過有幾個(gè)界面就有幾個(gè)按鈕，不要多也不要少。

2. 主界面矩形設(shè)置為動(dòng)態(tài)面板，點(diǎn)擊動(dòng)態(tài)面板添加4個(gè)狀態(tài)，每種狀態(tài)可由顏色區(qū)分開來，或者做成你所要設(shè)置的樣子。

3. 設(shè)置完成后，要讓每個(gè)圓形圖標(biāo)對應(yīng)到我們所設(shè)動(dòng)態(tài)面板的每個(gè)狀態(tài)，每個(gè)圓形對應(yīng)一個(gè)狀態(tài)（1-4圓形都這樣設(shè)置）。

4. 設(shè)置主界面（動(dòng)態(tài)面板）載入時(shí)進(jìn)行輪播，這里的轉(zhuǎn)動(dòng)時(shí)間和交互動(dòng)畫隨自己的喜好來慢慢調(diào)整既可。

5. 設(shè)置左右手工翻動(dòng)輪播圖，點(diǎn)擊“>”，朝右翻動(dòng)圖片，朝左，同理。

6. 全設(shè)置完后，會(huì)是這樣

7. 點(diǎn)擊預(yù)覽，輪播圖效果就完成啦！

作者：妖怪口袋，微信公眾號“妖怪口袋”

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

題圖來自Unsplash，基于CC0協(xié)議