這次我們來講解一個使用移動位置來實現(xiàn) Banner 輪播的效果，一起來文中看看~

先說一個篇外話，我寫這個之前觀看了一位行業(yè)內(nèi)的大神利用全局變量做的輪播圖。話不多說，看圖：

使用變量需要編輯很多參數(shù)，這對于新手來說有點不太容易理解，以下是該文件里面的變量設(shè)置：

交互用例（ 圖片 1 的距離 ）：

研究了一會，對我這種工作一兩年的人來說還可以理解，但感覺對于新手來說，可能比較難接受、消化…尤其沒有學(xué)習(xí) Axure 全局變量的產(chǎn)品、交互們來說，更是需要花費時間學(xué)習(xí)。

所以我打算做一個和以上類似的，利用移動來實現(xiàn)是一種比較簡單的效果，也容易上手。文章我盡量寫得詳細一點，讓大家都能學(xué)會這個效果（ 往后各種小伙伴成大神之后就可以學(xué)學(xué)上面那種了 ）。

一、準(zhǔn)備元件

1. 打開 Axure 新建文件，拖取一個矩形：設(shè)置長度 300 px ，高度 200 px ，命名為 2 ；
2. 然后再拖取兩個矩形：設(shè)置長度 200 px ，高度 133 px 一個命名為 1 ，一個為 3 ；
3. 設(shè)置位置 ：1 的 x y 軸為：（ 0 , 34 ） 、 2 的 x y 軸為：（ 160 、 0 ） ，3 的 x y 軸為 （ 420 , 34 ）。

前提條件做完之后，如下圖：

二、設(shè)置矩形的的交互樣式

1. 雙擊 “ 鼠標(biāo)單擊時 ” ，將 1 置于頂部；
2. 移動圖片位置，設(shè)置圖片移動?1 為（ 160 , 0 ）、 2 為（ 420 , 34 ）、3 為（ 0 , 34 ）；
3. 設(shè)置圖片尺寸，1 為長度 300 px ，寬度為 200 px ，2 和 3 的長度為 200 px ， 寬度為 133 px 。

解說：

（1）因為圖片 1 需要展示在三個圖片中間 ，需要修改位置、修改尺寸大小 ，且需要將中間的圖片置于頂部，才不會被另外兩個圖片擋到。

（2）其他設(shè)置 ：

• 點擊 2 時置頂 2 圖片 ，設(shè)置圖片移動?1 為（ 0, 34 ）、 2 為（ 160 , 0 ）、3 為（ 420 , 34 ），設(shè)置尺寸大小?2 為長度 300 px ，寬度為 200 px ，1 和 3 的長度為 200 px ， 寬度為 133 px；
• 點擊 3 時置頂 3 圖片 ，設(shè)置圖片移動?1 為（ 420 , 34 ）、 2 為（ 0 , 34 ）、3 為（ 160 , 0 ），設(shè)置尺寸大小 3?為長度 300 px ，寬度為 200 px ，1 和 2 的長度為 200 px ， 寬度為 133 px 。

（3）這樣基本的點擊效果就已經(jīng)完成了，可以看下效果。各位小伙伴做完之后，是不是覺得簡單很多呢 ？

點擊圖片的操作一般應(yīng)用在 PC 端的 Banner 輪播切換 ，但在移動端上面更多的輪播方式是左右拖動（手動） ，點擊的方式不適合在移動端使用 。

接下來我們來嘗試一下在移動端的做法…

三、進階（移動端操作）

1. 全選三張圖片 ，右鍵轉(zhuǎn)換成動態(tài)面板；
2. 點擊動態(tài)面板 ，雙擊 “ 向左拖動結(jié)束時 ” ，設(shè)置 Case 1 的條件：元件范圍 – 1 -未接觸 – 元件范圍 – 3 ，點擊確定；將 3 置于頂層，設(shè)置圖片移動?1 為（ 420 , 34 ）、 2 為（ 0 , 34 ）、3 為（ 160 , 0 ），設(shè)置尺寸?3?為長度 300 px ，寬度為 200 px ，1 和 2 的長度為 200 px ， 寬度為 133 px?；后面需要再設(shè)置 2 未接觸 1 ，3 未接觸 2 ，以此類推。
3. 設(shè)置完 “ 向左拖動結(jié)束時 ” 之后，需要再設(shè)置 “ 向右拖動結(jié)束時 ”，因為一一述說文字太多，想必大家也不愿意看，所以直接上圖：

把上面所有條件設(shè)置完之后，就可以得到以下的效果（ 圖里的按鈕只為了展示當(dāng)前的操作方式 ）：

這樣我們就把所有的效果做完了，有沒有覺得比設(shè)置全局變量簡單一點呢？

以上就已制作完所有流程，需要源文件或者有相關(guān)問題討論的，歡迎在下方留言，謝謝。

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

題圖來自網(wǎng)絡(luò)