起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門(mén)專(zhuān)項(xiàng)技能課
1300+專(zhuān)題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專(zhuān)業(yè)技能直播
會(huì)員專(zhuān)屬社群
榮耀標(biāo)識(shí)Axure教程 | 如何使用中繼器當(dāng)數(shù)據(jù)庫(kù)，制作web端幻燈片？
本期教程制作的是web端的幻燈片，制作中使用了中繼器做為圖片和文本的內(nèi)容存儲(chǔ)源，制作繁瑣了一點(diǎn)，但是可以當(dāng)做初步了解中繼器的一種方式。
老規(guī)矩，先看GIF效果圖
幻燈片：https://1bqith.axshare.com
制作方式
我們先看下幻燈片需要用到的元素：
幻燈片需要用到的基礎(chǔ)元素是5個(gè)。
分別為：
- 背景大圖
- 左按鈕
- 右按鈕
- 大圖上的文本
- 圖片切換按鈕
首先
我們?cè)贏xure中拖入一個(gè)動(dòng)態(tài)面板，我們命名為：“幻燈片”。
然后為這個(gè)面板設(shè)置3種狀態(tài)，分別命名為：“圖片1”，“圖片2”，“圖片3”。
每個(gè)狀態(tài)里面都要放一張圖片元件和一個(gè)文本元件。
命名方式為元素加序號(hào)，比如這樣：image1，title1。
做兩個(gè)按鈕，分別為左右按鈕，放到動(dòng)態(tài)面板的左右兩邊，設(shè)置為隱藏。
再做三個(gè)小按鈕，放到動(dòng)態(tài)面板的右下腳，設(shè)置點(diǎn)亮后的顏色，和默認(rèn)的顏色。
其次
需要用到我們的中繼器，元素庫(kù)里拖一個(gè)中繼器到頁(yè)面中，刪除里面到內(nèi)容。
創(chuàng)建兩個(gè)字段，設(shè)置三條數(shù)據(jù)：
為中繼器設(shè)置交互，一個(gè)是載入的時(shí)候進(jìn)行排序，一個(gè)是為動(dòng)態(tài)面板里的圖片和標(biāo)題進(jìn)行賦值。
最后
我們給動(dòng)態(tài)面板和按鈕分別設(shè)置交互動(dòng)作，這個(gè)幻燈片就算完成了。
缺點(diǎn)/Bug
1.這樣制作幻燈片，底部的三個(gè)按鈕，在顯示順序上要比圖片速度慢，不夠流暢。
2.左右按鈕默認(rèn)是隱藏的，在鼠標(biāo)放到幻燈片之后，才會(huì)顯示。這種交互在來(lái)回進(jìn)入圖片的時(shí)候，會(huì)導(dǎo)致按鈕的顯示交互紊亂。
3.制作幻燈片的步驟并沒(méi)有減少，制作速度并沒(méi)有提高。
本文到此結(jié)束，歡迎朋友們拍磚，多多指出其中的不足。
本文Axure版本：Axure RP 8
擴(kuò)展閱讀
Axure教程 | web端的驗(yàn)證碼（普通驗(yàn)證碼和滑塊驗(yàn)證碼）如何制作？
Axure教程 | 小白入門(mén)，制作web端注冊(cè)/登錄
其他原型鏈接
- 注冊(cè)和登錄鏈接：https://tk5yg4.axshare.com
- 普通驗(yàn)證碼鏈接：https://k4x9cz.axshare.com
- 滑塊驗(yàn)證碼鏈接：https://61uzxz.axshare.com
本文由 @jiantian 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash，基于CC0協(xié)議。
- 目前還沒(méi)評(píng)論，等你發(fā)揮！
