中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

一、成果展示

由于gif圖片的體積過大，所以無法進行成果展示。

此處為體驗地址：點擊我體驗。

交互說明：

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

二、制作步驟

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

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

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

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

2.向前和向后按鍵

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

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

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

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

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

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

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

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

總結(jié)

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

#專欄作家#

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

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

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