编者按:我们应该已经看到了很多关于移动可拖动横幅的信息，但是很少有人知道或实践如何开始实现这个功能。今天，本文的作者演示了如何通过Axure实现移动可拖动横幅。

当我们使用Axure作为移动终端的原型时，我们经常需要做一个Banner。今天，我们将是一面可以拖动和切换的旗帜。

一.原型要求

Banner图每3秒自动向左滚动切换；拖动Banner图切换（大幅度拖动切换，小幅度不切换，拖动过程中不切换，拖动停止时切换）；点击标签切换到对应页面；每次切换后，重新等待3秒再自动切换。

二、实现原则

利用动态面板的“载入时”-“设置面板状态”实现循环自动切换；利用“设置面板状态”打断循环自动切换。

第三，动手生产

1.首先为Banner准备几张图。这里有五张400*225的图片。

2.在页面上放一个动态面板(大小400*225)，将其名称改为“横幅面板”，状态2到状态5添加空个状态；

3.在横幅面板的state1中放一个动态面板，大小和横幅面板一样，改名为“拖动面板”；

4.将一个400*225的像素放在拖拽面板的状态1的(0，0)(-400，0)(400，0)；

5.将三个图片元素Ctrl+G合并，重命名为“横幅图”；

6.在页面上放一个动态面板(大小400*50)，将其名称改为“Banner tag”，状态2到状态5添加空个状态；

7.在横幅标签的状态1放一个400*50的矩形，填充颜色改为线性半透明，填充文字并调整位置，名称改为“标题文字”；然后放一个20*20的按钮，在白色边框上用白色字符透明填充背景色，填入数字1，将选中的组件样式改为黑色字体，白色填充背景色，将其名称改为“Label Button”；

8.与横幅面板的交互

(1)装载时:

1)设置面板状态

Banner面板，状态：下一项并向后循环，进入动画：向左滑动 500ms，更多选项：循环间隔3000ms，首个状态延时3000ms后切换；Banner标签，状态：下一项并向后循环，进入动画：逐渐 500ms，更多选项：循环间隔3000ms，首个状态延时3000ms后切换。

这时候可以先预览一下。面板可以自动切换，但是状态2到状态5没有原件，看起来像空空。

9.与拖动面板的交互

(1)拖动开始时:

设置面板状态：Banner面板，状态为停止循环设置面板状态：Banner标签，状态为停止循环

(2)拖动时

移动:横幅图，水平拖动，边界:左侧:=400(确保左右拖动最大距离为一张图片)。

(3)拖动结束时

1)案例1:总值

移动：Banner图到达(-800,0)，动画：线性300ms （看起来切换到下一个状态）；设置面板状态：Banner标签，状态：下一项并向后循环，进入动画：逐渐 300ms；等待：300ms （等待上面的移动动画结束）；设置面板状态：Banner面板到下一项并向后循环 （真正切换ר��ҳ�����到下一个状态）； 移动：Banner图回拖动前位置（元件归位）； 触发事件：Banner面板的载入时（重新开始自动切换）。

2)场景2:totaldraxx >:= 100(水平向右拖动1/4页宽时)

 移动：Banner图到达(0,0)，动画：线性300ms （看起来切换到上一个状态）； 设置面板状态：Banner标签，状态：上一项并向后循环，进入动画：逐渐 300ms； 等待：300ms （等待上面的移动动画结束）； 设置面板状态：Banner面板到上一项并向后循环 （真正切换到上一个状态）； 移动：Banner图回拖动前位置（元件归位）； 触发事件：Banner面板的载入时（重新开始自动切换）。

3)场景3:(左右拖动小于1/4页宽时)

  移动：Banner图回拖动前位置，动画：线性300ms； 触发事件：Banner面板的载入时（重新开始自动切换）。

10.将拖动面板复制到横幅面板的状态2到状态5。

11.与横幅标签的交互:

(1)当点击状态1中的标签按钮时:

设置面板状态：Banner面板 到 state1，进入动画：向左滑动500ms；设置面板状态：Banner标签 到 state1，进入动画：逐渐500ms；触发事件：Banner面板 载入时。

(2)复制4个标签按钮，将文本改为2 & # 8211；5，并将交互中横幅面板和横幅标签的设置面板状态更改为状态2 & # 8211；状态5 .

(3)将横幅标签& # 8211的状态1中的标题文本和五个标签按钮复制到状态2；状态5，将状态1的标签按钮1设置为选中，将状态2的标签按钮2设置为选中，以此类推；然后修改各州的标题文字。

12.将我们初步准备好的图片放入横幅面板中对应状态的拖拽面板中的原始图片，比如状态1中的横幅图片，中间是1号图片，右边是2号图片，左边是5号图片；状态2的横幅图，中间是2号图，右边是3号图，左边是1号图，以此类推。

13.现在，我们来做好高保真横幅的拖拽工作。我们用F5来预览一下。