輪播圖是現(xiàn)代網(wǎng)頁設(shè)計(jì)中常見且引人注目的元素之一。它以其動(dòng)態(tài)性和吸引力而在各種網(wǎng)站上廣泛應(yīng)用，從電子商務(wù)到新聞門戶網(wǎng)站，再到藝術(shù)和攝影領(lǐng)域。

下面我們一起看看在Axure中如何用中繼器實(shí)現(xiàn)一個(gè)動(dòng)態(tài)輪播圖

預(yù)覽地址：http://www.axuredesign.com/index.php?m=content&c=index&a=lists&catid=19&id=28

一、元件準(zhǔn)備

1. 在畫布中拖入一個(gè)中繼器

2. 雙擊進(jìn)入中繼器，將中繼器內(nèi)部元件更換為圖片

3. 中繼器的配置項(xiàng)中配置一列作為需要展示的圖片（右鍵引入圖片）

4. 將中繼器改為水平布局

5. 右鍵點(diǎn)擊中繼器，設(shè)置為一個(gè)組合，在右鍵點(diǎn)擊中繼器組合（命名為內(nèi)容器），再次轉(zhuǎn)為動(dòng)態(tài)面板（命名為外容器），然后設(shè)置動(dòng)態(tài)面板寬度為中繼器內(nèi)單個(gè)圖片寬度。

6. 在新建一個(gè)動(dòng)態(tài)面板，命名為計(jì)時(shí)器（用于觸發(fā)輪播效果）

二、交互設(shè)置

1. 進(jìn)入動(dòng)態(tài)面板，點(diǎn)擊中繼器，新增中繼器每項(xiàng)加載時(shí)設(shè)置圖片為每項(xiàng)的值。

2. 設(shè)置 外容器 動(dòng)態(tài)面板交互

向左拖動(dòng)時(shí)，移動(dòng) 內(nèi)容器 的X坐標(biāo) 為 減去一個(gè)內(nèi)容圖片寬度

向右拖動(dòng)時(shí)，移動(dòng) 內(nèi)容器 的X坐標(biāo) 為 加上一個(gè)內(nèi)容圖片寬度

鼠標(biāo)移入時(shí)，停止定時(shí)器的循環(huán)

鼠標(biāo)移出時(shí)，觸發(fā)定時(shí)器載入時(shí)的循環(huán)

3. 設(shè)置中繼器外部組合的交互。

元件移動(dòng)時(shí)交互：

當(dāng)坐標(biāo)軸>0的時(shí)候，移動(dòng) 內(nèi)容器 到達(dá) 負(fù)的（內(nèi)容器的寬度-內(nèi)容圖片寬度），實(shí)現(xiàn)第一張圖向右滑動(dòng)的時(shí)候移動(dòng)到最后一個(gè)圖片

當(dāng)坐標(biāo)軸==負(fù)的內(nèi)容器寬度時(shí)，則已經(jīng)時(shí)最后一張圖，然后直接移動(dòng)內(nèi)容器的X到0，實(shí)現(xiàn)循環(huán)

4. 設(shè)置計(jì)時(shí)器交互

定時(shí)器載入時(shí)交互： 循環(huán) 設(shè)置當(dāng)前動(dòng)態(tài)面板為下一項(xiàng)，然后循環(huán)間隔為3000毫秒

狀態(tài)改變時(shí)：觸發(fā)外容器向左滑動(dòng)時(shí)

到此處就完成啦~~~趕快去試試吧

預(yù)覽地址：http://www.axuredesign.com/index.php?m=content&c=index&a=show&catid=1&id=28