廣告圖輪播在日常的原型設(shè)計(jì)中是最常見的了，今天和大家分享如何制作自動輪播+手工點(diǎn)擊切換，底部有已制作好的原型文件下載，廢話不多說，咋們現(xiàn)在就動手實(shí)現(xiàn)。

首先看一下我們最終想要的效果：

一、制作自動輪播

1、選中圖片右鍵轉(zhuǎn)換為動態(tài)面板，同時(shí)在動態(tài)面板中添加第二張和第三張廣告圖。

如下圖：

2、點(diǎn)擊頁面空白處，設(shè)置頁面載入時(shí)事件，選擇 設(shè)置動態(tài)面板 效果，選擇banner圖片動態(tài)面板，把狀態(tài)設(shè)置為 Next , 勾選 向后循環(huán) 和 循環(huán)間隔 ，同時(shí)設(shè)置好進(jìn)入動畫和退出動畫向左滑動。

如下圖：

3、重復(fù)以上兩步操作把焦點(diǎn)圖完成，其中注意兩點(diǎn)，一是進(jìn)入動畫和退出動畫設(shè)置為 逐漸，二是每一幀設(shè)置好對應(yīng)的焦點(diǎn)樣式。

到這里可以預(yù)覽一下效果，會發(fā)現(xiàn)簡單兩步，我們就實(shí)現(xiàn)了廣告圖輪播了，嘻嘻。

接下來我們進(jìn)入第二大步，增加點(diǎn)擊切換功能。

二、增加點(diǎn)擊切換

給每一幀的焦點(diǎn)樣式增加鼠標(biāo)單機(jī)時(shí)事件，點(diǎn)擊時(shí)觸發(fā)2個事件：

（1）設(shè)置切換面板狀態(tài)，需同時(shí)設(shè)置好?焦點(diǎn)樣式?和?banner圖片?對應(yīng)的面板狀態(tài)。

例如：選擇第一幀的元素，則設(shè)置?焦點(diǎn)樣式?和?banner圖片 的面板狀態(tài)切換到第一幀和第一張，以此類推，把第二幀和第三幀設(shè)置好。

（2）設(shè)置單擊后自動輪播，需同時(shí)設(shè)置好?焦點(diǎn)樣式?和?banner圖片?對應(yīng)的面板狀態(tài)自動輪。

方法和第一步基本雷同，例如選擇第一幀的元素，則設(shè)置?焦點(diǎn)樣式?和?banner圖片 的面板狀態(tài)設(shè)置為Next，向后循環(huán)，設(shè)置項(xiàng)如下圖：

用此方法重復(fù)把每一幀的焦點(diǎn)樣式制作好，我們的banner圖自動輪播+點(diǎn)擊切換輪播，就完成了，是不是很簡單。

原型下載地址：https://www.xiangtianchi.com/web/OpusDetail?id=47

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

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