本期教程制作的是web端的幻燈片，制作中使用了中繼器做為圖片和文本的內(nèi)容存儲源，制作繁瑣了一點，但是可以當做初步了解中繼器的一種方式。

老規(guī)矩，先看GIF效果圖

幻燈片：https://1bqith.axshare.com

制作方式

我們先看下幻燈片需要用到的元素：

幻燈片需要用到的基礎(chǔ)元素是5個。

分別為：

1. 背景大圖
2. 左按鈕
3. 右按鈕
4. 大圖上的文本
5. 圖片切換按鈕

首先

我們在Axure中拖入一個動態(tài)面板，我們命名為：“幻燈片”。

然后為這個面板設(shè)置3種狀態(tài)，分別命名為：“圖片1”，“圖片2”，“圖片3”。

每個狀態(tài)里面都要放一張圖片元件和一個文本元件。

命名方式為元素加序號，比如這樣：image1，title1。

做兩個按鈕，分別為左右按鈕，放到動態(tài)面板的左右兩邊，設(shè)置為隱藏。

再做三個小按鈕，放到動態(tài)面板的右下腳，設(shè)置點亮后的顏色，和默認的顏色。

其次

需要用到我們的中繼器，元素庫里拖一個中繼器到頁面中，刪除里面到內(nèi)容。

創(chuàng)建兩個字段，設(shè)置三條數(shù)據(jù)：

為中繼器設(shè)置交互，一個是載入的時候進行排序，一個是為動態(tài)面板里的圖片和標題進行賦值。

最后

我們給動態(tài)面板和按鈕分別設(shè)置交互動作，這個幻燈片就算完成了。

缺點/Bug

1.這樣制作幻燈片，底部的三個按鈕，在顯示順序上要比圖片速度慢，不夠流暢。

2.左右按鈕默認是隱藏的，在鼠標放到幻燈片之后，才會顯示。這種交互在來回進入圖片的時候，會導(dǎo)致按鈕的顯示交互紊亂。

3.制作幻燈片的步驟并沒有減少，制作速度并沒有提高。

本文到此結(jié)束，歡迎朋友們拍磚，多多指出其中的不足。

本文Axure版本：Axure RP 8

擴展閱讀

Axure教程 | web端的驗證碼（普通驗證碼和滑塊驗證碼）如何制作？

Axure教程 | 小白入門，制作web端注冊/登錄

其他原型鏈接

• 注冊和登錄鏈接：https://tk5yg4.axshare.com
• 普通驗證碼鏈接：https://k4x9cz.axshare.com
• 滑塊驗證碼鏈接：https://61uzxz.axshare.com

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

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