大小圖動(dòng)態(tài)輪播常用于展示多張圖片，其中包含兩種不同尺寸的圖片。這種類型的輪播通常用于網(wǎng)站首頁、產(chǎn)品展示、廣告宣傳等場(chǎng)景，提供更豐富的展示方式，吸引用戶的注意力并提供更多信息。通過切換不同的圖片，可以有效地傳達(dá)多個(gè)內(nèi)容或產(chǎn)品。本文作者分享在Axure中如何用中繼器+動(dòng)態(tài)面板制作一個(gè)大小圖動(dòng)態(tài)輪播的原型模板。

一、效果展示

• 自動(dòng)輪播效果，可以自動(dòng)循環(huán)輪播
• 停止輪播效果，鼠標(biāo)移入輪播圖時(shí)，會(huì)停止輪播，用戶可以自由選擇
• 滑動(dòng)切換圖片效果，可以通過左右拖動(dòng)切換上一張或下一張圖片
• 點(diǎn)擊切換圖片效果，鼠標(biāo)單擊左右小圖時(shí)，可以切換至大圖
• 點(diǎn)擊按鈕切換圖片，鼠標(biāo)單擊左右兩側(cè)圖片，可以切換上一張或下一張圖片

具體效果可以打開下方鏈接查看：

二、制作教程

1. 通過中繼器儲(chǔ)存圖片

我們用中繼器來制作這個(gè)原型模板，意義在于復(fù)用性強(qiáng)，制作完成后，后續(xù)更換或者增加圖片，我們只需要修改中繼器表格的信息及可。

中繼器表格如下圖所示：

sortid列：對(duì)應(yīng)圖片的編號(hào)默認(rèn)按12345順序排列

picture列：對(duì)應(yīng)圖片列，右鍵導(dǎo)入對(duì)應(yīng)圖片即可

這里圖片可以大于5張，有多少張就導(dǎo)入多少張，后續(xù)會(huì)通過交互，讓他們循環(huán)顯示。

2. 動(dòng)態(tài)面板控制圖片顯示

我們要添加動(dòng)態(tài)面板，因?yàn)橹挥袆?dòng)態(tài)面板有拖動(dòng)的事件，后續(xù)交互需要用到動(dòng)態(tài)面板，而且動(dòng)態(tài)面板可以遮擋多余的內(nèi)容。我們需要在動(dòng)態(tài)面板里添加5張圖片，如下圖所示：

真正在動(dòng)態(tài)面板里顯示的圖片只有234兩張圖片，15只是是用于移動(dòng)的動(dòng)態(tài)效果。

3. 中繼器交互

我們要將中繼器里的圖片設(shè)置到對(duì)應(yīng)的圖片元件里，所以我們?cè)谥欣^器每項(xiàng)加載時(shí)，我們用設(shè)置圖片的交互，將圖片設(shè)置到對(duì)應(yīng)的元件里，這里我們需要根據(jù)情況來設(shè)置，如果是第一行，就設(shè)置到第一張圖片元件，第二行就設(shè)置到第二張圖片元件……

這樣就將對(duì)應(yīng)的圖片設(shè)置上去了。

4. 動(dòng)態(tài)面板左右拖動(dòng)切換圖片

首先我們講一下他是怎么切換圖片的，如果是向左拖動(dòng)，其實(shí)就是想將右右面的那章圖片放在中部，就是第4張要移動(dòng)到第三張的位置，并且從小圖變成大圖，所以我們分別用移動(dòng)的交互，將整個(gè)組合移動(dòng)一個(gè)小圖的距離，然后用設(shè)置尺寸的交互，將3的大圖設(shè)置成小圖，將4的小圖設(shè)置為大圖，這里移動(dòng)和設(shè)置尺寸的交互我們都可以增加一個(gè)動(dòng)畫效果，一般等待時(shí)間設(shè)置為500ms，當(dāng)然也可以根據(jù)你們的需要增加或者減少。

這樣我們就移動(dòng)完一次了，那我們?nèi)绻肟梢远啻我苿?dòng)怎么辦，那我們就要對(duì)他回復(fù)原狀。

我們首先用等待的時(shí)間，等待他動(dòng)畫結(jié)束，所以這里等待時(shí)間可以比動(dòng)畫時(shí)間稍長一點(diǎn)，然后我們用移動(dòng)和設(shè)置尺寸的交互，就是像右移動(dòng)一個(gè)，將圖3變回大圖，將圖四變回小圖，這里注意，移動(dòng)和設(shè)置尺寸都是瞬間完成的事，所以不要添加動(dòng)畫。

那這樣不就是回復(fù)原來的樣子嗎，對(duì)的，其實(shí)我們只需要那個(gè)移動(dòng)和變大的動(dòng)畫效果，結(jié)束之后我們我們通過交互瞬間恢復(fù)原狀。然后再通過控制中繼器里的圖片值，來改變里面顯示的圖片，例如原來第五行的圖片，我們將它變成第四行，第四行變成第三行，第三行變成第二行，第二行變成第一行。

所以我們?cè)谥欣^器載入的時(shí)候，要首先對(duì)中繼器進(jìn)行排序，對(duì)sortid列進(jìn)行升序排列。

然后我們只需要通過更新行的交互，將第一行的圖片的sortid設(shè)置為當(dāng)前值+中繼器數(shù)據(jù)行數(shù)，這樣就可以讓他變成最大，例如，中繼器有5張圖片，第一次向左拖動(dòng)圖片之后，我們把第一行的圖片的sortid設(shè)置為1+5=6，這樣他就變成最后一行了，配合前面排序和設(shè)置圖片的交互，第一張圖就變成最后一張圖，第5張圖就變成第四張圖……如此類圖，想相當(dāng)于圖片瞬間移動(dòng)了一格。

這樣我們就完成了向左拖動(dòng)，向右拖動(dòng)的原理也是一樣，只不過方向變了而已。

5. 點(diǎn)擊2、4小圖切換圖片

其實(shí)完成上面的，交互，后面的都很簡(jiǎn)單，因?yàn)榭梢杂糜|發(fā)的交互實(shí)現(xiàn)，例如我們鼠標(biāo)單擊第4張圖時(shí)，就是想第四張圖去到中間第三張圖的位置，所以我們用觸發(fā)的交互，觸發(fā)動(dòng)態(tài)面板向左拖動(dòng)的交互，就是上面第四點(diǎn)寫的交互，直接觸發(fā)就可以了，沒必要在寫一次。

點(diǎn)擊第2張圖也是一樣的原理，只需要觸發(fā)動(dòng)態(tài)面板向右拖動(dòng)的交互即可。

6. 點(diǎn)擊左右箭頭切換圖片

鼠標(biāo)點(diǎn)擊左右箭箭頭也是一樣的道理，如果點(diǎn)擊的是右箭頭，我們觸發(fā)動(dòng)態(tài)面板向左拖動(dòng)的交互即可。這里如果想交互更加細(xì)致，可以加一個(gè)啟用和禁用的交互，防止用戶連點(diǎn)，因?yàn)閳D片切換有動(dòng)畫時(shí)間，如果連續(xù)點(diǎn)擊就會(huì)出現(xiàn)bug，所以我們可以點(diǎn)擊之后，先禁用按鈕，等待動(dòng)畫時(shí)間結(jié)束，再次啟用按鈕，就可以防止bug的出現(xiàn)。

如果是點(diǎn)擊左箭頭，也是一樣的原理，只需要改成觸發(fā)動(dòng)態(tài)面板向右拖動(dòng)的交互即可。

7. 循環(huán)輪播

我們?cè)黾右粋€(gè)動(dòng)態(tài)面，里面兩個(gè)空白的狀態(tài)，用于制作循環(huán)。

動(dòng)態(tài)面板載入時(shí)，我們用設(shè)置面板狀態(tài)的交互，設(shè)置這個(gè)動(dòng)態(tài)面板為下一項(xiàng)，勾選循環(huán)，設(shè)置循環(huán)時(shí)間。然后在動(dòng)態(tài)面板狀態(tài)改變時(shí)，我們直接觸發(fā)觸發(fā)動(dòng)態(tài)面板向左拖動(dòng)的交互即可。這樣就完成自動(dòng)輪換輪播了。

8. 停止循環(huán)和重新開始循環(huán)

我們把所有元件組合在一起，鼠標(biāo)移入圖片時(shí)，我們默認(rèn)用戶想看圖或者做其他操作，所以就要停止循環(huán)，我們用設(shè)置面板狀態(tài)的交互，選擇停止循環(huán)即可。

如果鼠標(biāo)移入后，我們可以用前面動(dòng)態(tài)面板載入時(shí)一樣的交互，重新設(shè)置面板循環(huán)，這樣圖片就會(huì)重新開始循環(huán)切換。

這樣我們就制作完成了大小圖動(dòng)態(tài)輪播的原型模板了，下次使用時(shí)，只需要在中繼器表格里導(dǎo)入對(duì)應(yīng)圖片，即可自動(dòng)實(shí)現(xiàn)大小圖輪播的效果了，是不是很方便呢？當(dāng)然，后續(xù)你們也可以根據(jù)需要，增加一些效果，例如點(diǎn)擊對(duì)應(yīng)圖片，跳轉(zhuǎn)至對(duì)應(yīng)的頁面等。

那以上就是本期教程的全部?jī)?nèi)容，感興趣的同學(xué)們可以動(dòng)手試試哦，感謝您的閱讀，我們下期見。