中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

一、效果展示

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

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

二、制作教程

1. 通過中繼器儲存圖片

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

中繼器表格如下圖所示：

sortid列：對應圖片的編號默認按12345順序排列

picture列：對應圖片列，右鍵導入對應圖片即可

這里圖片可以大于5張，有多少張就導入多少張，后續會通過交互，讓他們循環顯示。

2. 動態面板控制圖片顯示

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

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

3. 中繼器交互

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

這樣就將對應的圖片設置上去了。

4. 動態面板左右拖動切換圖片

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

這樣我們就移動完一次了，那我們如果想可以多次移動怎么辦，那我們就要對他回復原狀。

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

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

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

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

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

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

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

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

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

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

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

7. 循環輪播

我們增加一個動態面，里面兩個空白的狀態，用于制作循環。

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

8. 停止循環和重新開始循環

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

如果鼠標移入后，我們可以用前面動態面板載入時一樣的交互，重新設置面板循環，這樣圖片就會重新開始循環切換。

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

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