Axure教程：使用移动位置来实现Banner轮播

　　这次我们来讲解一个使用移动位置来实现Banner轮播的效果，一起来文中看看
　　先说一个篇外话，我写这个之前观看了一位行业内的大神利用全局变量做的轮播图。话不多说，看图：
　　使用变量需要编辑很多参数，这对于新手来说有点不太容易理解，以下是该文件里面的变量设置：
　　交互用例（图片1的距离）：
　　研究了一会，对我这种工作一两年的人来说还可以理解，但感觉对于新手来说，可能比较难接受、消化尤其没有学习Axure全局变量的产品、交互们来说，更是需要花费时间学习。
　　所以我打算做一个和以上类似的，利用移动来实现是一种比较简单的效果，也容易上手。文章我尽量写得详细一点，让大家都能学会这个效果（往后各种小伙伴成大神之后就可以学学上面那种了）。
　　一、准备元件
　　打开Axure新建文件，拖取一个矩形：设置长度300px，高度200px，命名为2；
　　然后再拖取两个矩形：设置长度200px，高度133px一个命名为1，一个为3；
　　设置位置：1的xy轴为：（0，34）、2的xy轴为：（160、0），3的xy轴为（420，34）。
　　前提条件做完之后，如下图：
　　二、设置矩形的的交互样式
　　双击“鼠标单击时”，将1置于顶部；
　　移动图片位置，设置图片移动1为（160，0）、2为（420，34）、3为（0，34）；
　　设置图片尺寸，1为长度300px，宽度为200px，2和3的长度为200px，宽度为133px。
　　解说：
　　（1）因为图片1需要展示在三个图片中间，需要修改位置、修改尺寸大小，且需要将中间的图片置于顶部，才不会被另外两个图片挡到。
　　（2）其他设置：
　　点击2时置顶2图片，设置图片移动1为（0，34）、2为（160，0）、3为（420，34），设置尺寸大小2为长度300px，宽度为200px，1和3的长度为200px，宽度为133
　　点击3时置顶3图片，设置图片移动1为（420，34）、2为（0，34）、3为（160，0），设置尺寸大小3为长度300px，宽度为200px，1和2的长度为200px，宽度为133px。
　　（3）这样基本的点击效果就已经完成了，可以看下效果。各位小伙伴做完之后，是不是觉得简单很多呢？
　　点击图片的操作一般应用在PC端的Banner轮播切换，但在移动端上面更多的轮播方式是左右拖动（手动），点击的方式不适合在移动端使用。
　　接下来我们来尝试一下在移动端的做法
　　三、进阶（移动端操作）
　　全选三张图片，右键转换成动态面板；
　　点击动态面板，双击“向左拖动结束时”，设置Case1的条件：元件范围1未接触元件范围3，点击确定；将3置于顶层，设置图片移动1为（420，34）、2为（0，34）、3为（160，0），设置尺寸3为长度300px，宽度为200px，1和2的长度为200px，宽度为133；后面需要再设置2未接触1，3未接触2，以此类推。
　　设置完“向左拖动结束时”之后，需要再设置“向右拖动结束时”，因为一一述说文字太多，想必大家也不愿意看，所以直接上图：
　　把上面所有条件设置完之后，就可以得到以下的效果（图里的按钮只为了展示当前的操作方式）：
　　这样我们就把所有的效果做完了，有没有觉得比设置全局变量简单一点呢？
　　以上就已制作完所有流程，需要源文件或者有相关问题讨论的，欢迎在下方留言，谢谢。