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

一、效果展示

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

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

二、制作教程

1. 通過中繼器儲存圖片

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

中繼器表格如下圖所示：

sortid列：對應(yīng)圖片的編號默認按12345順序排列

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

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

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

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

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

3. 中繼器交互

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

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

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

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

這樣我們就移動完一次了，那我們?nèi)绻肟梢远啻我苿釉趺崔k，那我們就要對他回復(fù)原狀。

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

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

所以我們在中繼器載入的時候，要首先對中繼器進行排序，對sortid列進行升序排列。

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

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

5. 點擊2、4小圖切換圖片

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

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

6. 點擊左右箭頭切換圖片

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

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

7. 循環(huán)輪播

我們增加一個動態(tài)面，里面兩個空白的狀態(tài)，用于制作循環(huán)。

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

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

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

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

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

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