編輯導語：關于移動端可拖動Banner，我們應該看到過許多，但是對于如何上手操作去實現(xiàn)這項功能，卻很少有人知道或者實踐過。今天，本文作者通過實際操作為我們演示了如何通過Axure實現(xiàn)移動端可拖動Banner。

我們用Axure做移動端原型時經(jīng)常需要做Banner，今天來做一個可以拖動切換的Banner。

一、原型要求

1. Banner圖每3秒自動向左滾動切換；
2. 拖動Banner圖切換（大幅度拖動切換，小幅度不切換，拖動過程中不切換，拖動停止時切換）；
3. 點擊標簽切換到對應頁面；
4. 每次切換后，重新等待3秒再自動切換。

二、實現(xiàn)原理

1. 利用動態(tài)面板的“載入時”-“設置面板狀態(tài)”實現(xiàn)循環(huán)自動切換；
2. 利用“設置面板狀態(tài)”打斷循環(huán)自動切換。

三、動手制作

1、首先準備幾張用來做Banner的圖片，這里找了5張400*225的圖片；

2、在頁面上放入一個動態(tài)面板（尺寸400*225），改名“Banner面板”，添加空狀態(tài)state2至state5；

3、Banner面板的state1內(nèi)放入一個動態(tài)面板，尺寸與Banner面板一致，改名“拖動面版”；

4、在拖動面板的state1內(nèi)，（0,0）（-400,0）（400,0）各放一個400*225的圖片圖片元件；

5、將3個圖片元件Ctrl+G組合，改名“Banner圖”；

6、在頁面上放入一個動態(tài)面板（尺寸400*50），改名“Banner標簽”，添加空狀態(tài)state2至state5；

7、在Banner標簽的state1內(nèi)放入一個400*50的矩形，填充顏色改成線性半透明，填充文字并調(diào)整好位置，改名“標題文字”；再放入1個20*20的按鈕，白色邊線白色文字透明填充底色，填入數(shù)字1，元件選中樣式改為黑色字體白色填充底色，改名“標簽按鈕”；

8、對Banner面板的交互

（1）載入時：

1）設置面板狀態(tài)

1. Banner面板，狀態(tài)：下一項并向后循環(huán)，進入動畫：向左滑動 500ms，更多選項：循環(huán)間隔3000ms，首個狀態(tài)延時3000ms后切換；
2. Banner標簽，狀態(tài)：下一項并向后循環(huán)，進入動畫：逐漸 500ms，更多選項：循環(huán)間隔3000ms，首個狀態(tài)延時3000ms后切換。

這時候可以先預覽一下，面板已經(jīng)可以自動切換了，只是state2至state5里面沒有原件，看起來就空空如也。

9、對拖動面板的互動

（1）拖動開始時：

1. 設置面板狀態(tài)：Banner面板，狀態(tài)為停止循環(huán)
2. 設置面板狀態(tài)：Banner標簽，狀態(tài)為停止循環(huán)

（2）拖動時

移動：Banner圖，跟隨水平拖動，邊界：左側<=0，右側>=400(保證向左和向右都最多拖動一張圖的距離)。

（3）拖動結束時

1）情形1：值TotalDragX <= -100 （向左橫向拖動1/4頁面寬度時）

1. 移動：Banner圖到達(-800,0)，動畫：線性300ms （看起來切換到下一個狀態(tài)）；
2. 設置面板狀態(tài)：Banner標簽，狀態(tài)：下一項并向后循環(huán)，進入動畫：逐漸 300ms；
3. 等待：300ms （等待上面的移動動畫結束）；
4. 設置面板狀態(tài)：Banner面板到下一項并向后循環(huán) （真正切換到下一個狀態(tài)）；
5. ?移動：Banner圖回拖動前位置（元件歸位）；
6. ?觸發(fā)事件：Banner面板的載入時（重新開始自動切換）。

2）情形2：TotalDragX >= 100 （向右橫向拖動1/4頁面寬度時）

1. ?移動：Banner圖到達(0,0)，動畫：線性300ms （看起來切換到上一個狀態(tài)）；
2. ?設置面板狀態(tài)：Banner標簽，狀態(tài)：上一項并向后循環(huán)，進入動畫：逐漸 300ms；
3. ?等待：300ms （等待上面的移動動畫結束）；
4. ?設置面板狀態(tài)：Banner面板到上一項并向后循環(huán) （真正切換到上一個狀態(tài)）；
5. ?移動：Banner圖回拖動前位置（元件歸位）；
6. ?觸發(fā)事件：Banner面板的載入時（重新開始自動切換）。

3）情形3：（左右拖動不足1/4頁面寬度時）

1. ? 移動：Banner圖回拖動前位置，動畫：線性300ms；
2. ?觸發(fā)事件：Banner面板的載入時（重新開始自動切換）。

10、將拖動面板復制到Banner面板的state2 至 state5。

11、對Banner標簽的互動：

（1）state1內(nèi)的標簽按鈕 單擊時：

1. 設置面板狀態(tài)：Banner面板 到 state1，進入動畫：向左滑動500ms；
2. 設置面板狀態(tài)：Banner標簽 到 state1，進入動畫：逐漸500ms；
3. 觸發(fā)事件：Banner面板 載入時。

（2）將標簽按鈕復制4個，文字分別改為2 – 5，并將互動中的Banner面板和Banner標簽都的設置面板狀態(tài)改為state2 – state5。

（3）將state1內(nèi)的標題文字和5個標簽按鈕復制到Banner標簽的state2 – state5，將state1的標簽按鈕1設為選中，將state2的標簽按鈕2設為選中，以此類推；再修改各個state中的標題文字。

12、將我們最初準備好的圖片，放到Banner面板內(nèi)的對應狀態(tài)里的拖動面板里面的圖片原件，比如state1里的Banner圖，中間放1號圖片，右邊放2號圖片，左邊放5號圖片；state2里的Banner圖，中間放2號圖片，右邊放3號圖片，左邊放1號圖片，以此類推。

13、現(xiàn)在我們就把可以拖動的高保真Banner做好了，趕緊F5預覽一下吧。

原型鏈接：https://no5f2n.axshare.com

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

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