Banner輪播是原型圖中最常見的模塊之一，無(wú)論是電商類的app還是小說(shuō)類，視頻類app都離不開它；人人都是產(chǎn)品經(jīng)理的官網(wǎng)首頁(yè)展示內(nèi)容也是一個(gè)banner輪播。今天，作者將為大家介紹axure制作banner輪播的方法。

輪播的特點(diǎn)主要有自動(dòng)切換到下一張圖片，圖片到達(dá)末尾之后從頭開始循環(huán)。此外，下方的圖片導(dǎo)航也需要隨著圖片的切換而切換，告知用戶當(dāng)前圖片的位置。用戶可以通過(guò)圖片中的箭頭左右切換圖片，也可以使用下方的導(dǎo)航條來(lái)切換圖片。

一、成果展示

由于gif圖片的體積過(guò)大，所以無(wú)法進(jìn)行成果展示。

此處為體驗(yàn)地址：點(diǎn)擊我體驗(yàn)。

交互說(shuō)明：

• 圖片輪播的時(shí)間默認(rèn)為3000毫秒，時(shí)間到后即將切換到下一張圖片；
• 當(dāng)鼠標(biāo)進(jìn)入圖片范圍的時(shí)候圖片中將會(huì)顯示向前/向后的按鍵；
• 圖片中的導(dǎo)航隨著圖片的切換而切換；
• 點(diǎn)擊向前/向后以及導(dǎo)航都可以切換圖片。

二、制作步驟

1.圖片的循環(huán)

首先從網(wǎng)上下載一些免費(fèi)的圖片，然后將其大小設(shè)置為一個(gè)統(tǒng)一的數(shù)值，方便作為輪播素材。圖片的大小盡量小一些，以提升加載的速度。然后將所有的素材載入到axure之中。

添加一個(gè)動(dòng)態(tài)面板并設(shè)置5個(gè)狀態(tài)，每一個(gè)狀態(tài)添加一張圖片，分別作為圖片1-5。這樣在后續(xù)我們可以通過(guò)切換面板狀態(tài)的方式來(lái)實(shí)現(xiàn)圖片的輪播。

圖片輪播的方式如上圖所示，值得注意的是該設(shè)置方式需要應(yīng)用于多個(gè)地方。比如通過(guò)導(dǎo)航切換后應(yīng)該如上所示設(shè)置循環(huán)，當(dāng)頁(yè)面載入時(shí)也應(yīng)該如上所示設(shè)置循環(huán)，點(diǎn)擊向前/向后之后也應(yīng)該設(shè)置該循環(huán)。

2.向前和向后按鍵

按鍵是通過(guò)axure繪制的，方法也不是很難，即一個(gè)矩形加一個(gè)折線即可。然后設(shè)置其透明度并擺放到合適的位置上即可以實(shí)現(xiàn)目的。

繪制完成之后將這兩個(gè)按鍵隱藏，然后設(shè)置為當(dāng)鼠標(biāo)移入的時(shí)候顯示，移出的時(shí)候隱藏即可以實(shí)現(xiàn)效果。值得注意的是，該條件需要同時(shí)設(shè)置于圖片所在的動(dòng)態(tài)面板以及按鍵本身。

按鍵本身單擊時(shí)的觸發(fā)設(shè)置如上圖所示，直接觸發(fā)next效果，向前的設(shè)置同理。

3.導(dǎo)航的實(shí)現(xiàn)

導(dǎo)航也是直接使用axure進(jìn)行繪制的，矩形加圓即可實(shí)現(xiàn)。每個(gè)圓設(shè)置為一個(gè)動(dòng)態(tài)面板，state1為白色，state2為橙色，代表其兩個(gè)不同的狀態(tài)。

以1為例，當(dāng)鼠標(biāo)單擊的時(shí)候?qū)?設(shè)置為state2，然后其他的小圓狀態(tài)全部設(shè)置為state1即可以實(shí)現(xiàn)目的。當(dāng)然不要忘記將圖片所在的動(dòng)態(tài)面板設(shè)置為相應(yīng)的狀態(tài)。

現(xiàn)在導(dǎo)航可以進(jìn)行圖片切換了，但是圖片的自動(dòng)切換并不會(huì)修改導(dǎo)航的狀態(tài)。所以還需要進(jìn)一步的設(shè)置。

以第二個(gè)圖片為例子，當(dāng)daohang接觸到該圖片的時(shí)候，設(shè)置觸發(fā)鼠標(biāo)點(diǎn)擊2即可。同時(shí)不要忘記加入圖片循環(huán)，否則圖片循環(huán)將會(huì)停止。最后的“設(shè)置值于state=2”在本例子中沒(méi)有任何作用，是為了功能擴(kuò)展準(zhǔn)備的，即在圖片切換的時(shí)候知道了目前處于哪一個(gè)狀態(tài)。

總結(jié)

一個(gè)非常好用的實(shí)例，但設(shè)置起來(lái)還是很麻煩的，需要一個(gè)一個(gè)鍵的設(shè)置。難度并不高，函數(shù)以及變量都沒(méi)有使用到，主要依靠的是動(dòng)態(tài)面板的靈活使用。

#專欄作家#

馬璐，人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注產(chǎn)品設(shè)計(jì)以及用戶體驗(yàn)，力求在技術(shù)一定的情況下將產(chǎn)品做到極致，充分發(fā)揮技術(shù)的潛能。

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

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