以同樣的方法設(shè)置圖片2、3、4、5。

（4）為動(dòng)態(tài)面板mask添加交互

4.1 向左拖動(dòng)結(jié)束時(shí)

第一步：移動(dòng)動(dòng)態(tài)面板里的圖片組合向左側(cè)移動(dòng)X坐標(biāo)“相對(duì)”位置-322。這個(gè)數(shù)值自己去調(diào)整，在動(dòng)態(tài)面板中拖動(dòng)位置，自己計(jì)算起始位置到拖動(dòng)位置的差值即可。注意選擇的是相對(duì)位置即“經(jīng)過(guò)”，因?yàn)檫@樣的話不用設(shè)置y坐標(biāo)，加上線性動(dòng)畫(huà)500毫秒。

第二步：當(dāng)圖片組合向左挪動(dòng)一格后，挪出屏幕的是動(dòng)態(tài)面板圖2的位置并顯示的是中繼器index==2的圖片內(nèi)容，目前就是中繼器中的圖片2。同理顯示在主屏幕的應(yīng)該是動(dòng)態(tài)面板圖3的位置，并顯示的是中繼器index==3的圖片內(nèi)容，目前就是中繼器中的圖片3，所以設(shè)置原來(lái)是大圖的圖片2高度變小，原來(lái)是小圖的圖片3變大。

第三步：等待550毫秒，這里我要重點(diǎn)說(shuō)一下“等待”這個(gè)交互。因?yàn)槲覀兩厦鎺撞降慕换ブ卸加芯€性動(dòng)畫(huà)500毫秒的設(shè)置，如果在后續(xù)的動(dòng)作中，強(qiáng)調(diào)是“同步性”即在上述500毫秒的線性動(dòng)畫(huà)進(jìn)行的同時(shí)，去做其他動(dòng)作，這里可以不用加入“等待”交互。

如果強(qiáng)調(diào)“先后性”，即在500毫秒動(dòng)畫(huà)結(jié)束后，進(jìn)行接下來(lái)的動(dòng)作，那么必須在兩個(gè)動(dòng)作之間加入＞500毫秒的等待時(shí)長(zhǎng)。因?yàn)榻酉聛?lái)的第四步交互是要在上述動(dòng)作全部完結(jié)后再進(jìn)行，所以要加入550毫秒的等待。

第四步：燒腦時(shí)刻，我們要給中繼器重新排序，造輪播效果。

為中繼器更新行，更新條件為[[TargetItem.index==1]]即中繼器的第一行，注意上面所說(shuō)的index的含義。

更新列為：number列。

更新為：[[Item.number+TargetItem.Repeater.dataCount]]即第1行（TargetItem.index==1）的number列值為1，現(xiàn)在更新為1+5=6，這里的TargetItem.Repeater.dataCount是指該中繼器中數(shù)據(jù)的總行數(shù)，本中繼器一共5行數(shù)據(jù)，所以為1+5=6。

因?yàn)?，中繼器在載入時(shí)設(shè)置了以number數(shù)值為準(zhǔn)，做升序排列，所以作為這一步，原圖片順序的變化為：

上述順序，大家靜下心捋一捋就能明白，關(guān)鍵點(diǎn)：

• index數(shù)字是系統(tǒng)自帶行標(biāo)，不能改變的，就如同excel中左側(cè)的一列數(shù)字。
• number列的數(shù)字，是為了排序用。
• 動(dòng)態(tài)面板里的圖片占位符是為了確定位置。

到了這一步，我們看看效果gif：

第五步：大家會(huì)發(fā)現(xiàn)，當(dāng)我們拖動(dòng)動(dòng)態(tài)面板時(shí)，主窗口圖片由圖2變?yōu)閳D3并放大后，很快就切入下一輪播，即直接跳到圖片4，但是我們的原型是需要靠人為的主動(dòng)拖動(dòng)，將圖片進(jìn)行輪播。所以我們?cè)谕瓿晌恢弥嘏藕螅瑢⑻崆安シ诺膱D片4再拉回去。注意動(dòng)畫(huà)要選無(wú)。

第六步：重新排序后，被拉回主窗口的是動(dòng)態(tài)面板中圖片2的位置，所以將其改為大圖顯示，同理將被拉出櫥窗外的動(dòng)態(tài)面板中的圖3位置改為小圖，注意動(dòng)畫(huà)要選無(wú)。

到這步，向左滑動(dòng)交互全部完成，圖片的輪播順序變化總結(jié)如下：

4.2 同樣的方法為動(dòng)態(tài)面板添加交互——向右拖動(dòng)結(jié)束時(shí)

詳細(xì)步驟不再贅述，基于向左拖動(dòng)，向右拖動(dòng)很多數(shù)值和圖片位置的計(jì)算正好相反，簡(jiǎn)單的給大家劃一下重點(diǎn)：

下面這步條件為：[[TargetItem.index==TargetItem.Repeater.dataCount]]。

到這步，向右滑動(dòng)交互全部完成。

為輪播加入“自動(dòng)輪播”和“取消自動(dòng)輪播”以及“恢復(fù)自動(dòng)輪播功能”的交互

第一步：我們?cè)陧?yè)面新拖入一個(gè)動(dòng)態(tài)面板，命名auto，分別加入兩個(gè)狀態(tài)，state1和state2，每個(gè)狀態(tài)里沒(méi)有任何內(nèi)容。

第二步：在動(dòng)態(tài)面板auto載入時(shí)，加入自動(dòng)輪播的交互。

第三步：在動(dòng)態(tài)面板auto狀態(tài)改變時(shí)，加入“觸發(fā)”之前包含圖片的mask動(dòng)態(tài)面板向左拖動(dòng)結(jié)束時(shí)的交互，即狀態(tài)每改變一次，就向自動(dòng)左拖動(dòng)一次。

到這步就實(shí)現(xiàn)了動(dòng)態(tài)面板mask自動(dòng)輪播的效果，接下來(lái)，我們來(lái)實(shí)現(xiàn)解除和恢復(fù)自動(dòng)輪播的效果，即當(dāng)人工進(jìn)行拖動(dòng)時(shí)，自動(dòng)輪播停止，當(dāng)不再拖動(dòng)時(shí)，自動(dòng)輪播恢復(fù)。

第四步（接上面）：在動(dòng)態(tài)面板mask（含圖片組合的大動(dòng)態(tài)面板）“鼠標(biāo)按下”時(shí)，加入交互。

第五步：在動(dòng)態(tài)面板mask（含圖片組合的大動(dòng)態(tài)面板）“鼠標(biāo)移出”時(shí)，加入交互，即當(dāng)不再進(jìn)行操作時(shí)，重新觸發(fā)auto動(dòng)態(tài)面板載入時(shí)自動(dòng)輪播的交互。

至此，所有交互全部完成。

用上述方法可以制作很多網(wǎng)站流行的放大輪播效果。

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

題圖來(lái)自Unsplash，基于CC0協(xié)議