淘宝、天猫和京东等购物网站已经成为我们生活中的一部分，每每打开我们都可以看到有一个广告窗口，图片在里面循环滚动播放，那么它是怎么实现的呢？利用Axure软件我们可以简单实现，下面我将向大家分享一下具体步骤，希望能够帮助到大家。
原材料：
图片、动态面板、按钮、状态栏
注意命名，状态栏内的原点按钮命名和对应的图片一致，后面有妙用；按钮和状态栏都可以用矩形轻松制作而成。
步骤/方法
第一步：设置动态面板内容
动态面板状态设置成两层动态状态，分别是img1、img2，内置相应的图片，并将图片和动态面板的大小调成一致，本次案例中的大小是W:850,H:400。
在主界面将按钮和状态移入动态面板框内，调整好位置，设置left和right按钮的默认状态为“隐藏”。
第二步：设置动态面板滚动状态
选中动态面板“dong1”—元件交互与说明“载入时”添加用例—动态面板“设置面板状态”—dong1（动态面板）—“previous”“向前循环”“循环间隔4000毫秒”—进入动画“向左滑动”“向左滑动”—“如果隐藏则显示面板” （以上秒数可以自由选择）
第三步：设置点击图片打开广告链接的交互动作
双击动态面板“dong1”进入动态面板状态管理—进入面板状态“img1”—选中图片“img1”—元件交互与说明“鼠标单击时”—链接“打开链接”—打开位置“当前窗口”（也可以选中新窗口）—勾选“链接到url或文件”—超链接“http://www.baidu.com”（输入你的目标链接地址）（“img2”同）
第四步：设置按钮、状态栏“选中”状态
选中“left”按钮—元件属性与样式“属性”—交互样式设置“选中”（注意不要点错为禁用复选框的选中）—勾选“填充颜色”复选框并选择一个较深颜色，如#999999。（“right”同）
选中状态栏的原点按钮“img1”—元件属性与样式“属性”—交互样式设置“选中”—勾选“填充颜色”复选框并选择一个橙色，如#FF6600。（“img2”同）
选中状态栏的原点按钮“img1”和“img2”—元件属性与样式“属性”—输入[选项]组名称—输入“zu1”（随意输入都可以）
第五步：设置按钮、状态栏的交互事件
选中“left”按钮—元件交互与说明“鼠标单击时”—动态面板“设置面板状态”—dong1（动态面板）—“next”“向前循环”—进入动画“向右滑动”“向右滑动”
选中“right”按钮—元件交互与说明“鼠标单击时”—动态面板“设置面板状态”—dong1（动态面板）—“provious”“向前循环”—进入动画“向左滑动”“向左滑动”
left
right
选中“left”按钮—元件交互与说明“鼠标移入时”—元件“选中”—勾选“当前元件”—选中状态“值”“true”（“right”同）
选中“left”按钮—元件交互与说明“鼠标移出时”—元件“选中”—勾选“当前元件”—选中状态“值”“false”（“right”同）
选中状态栏的原点按钮“img1”—元件交互与名称“鼠标单击时”—动态面板“设置面板状态”—勾选“dong1”—选择状态“Value”—状态名称“[[This.name]]”(利用到了我们之间巧妙的命名了)（“img2”同）
第六步：设置动态面板与按钮和状态栏的交互
选中动态面板“dong1”—元件交互与说明“鼠标移入时”：
- 元件“显示”—勾选“right”“left”—可见性“显示”
- 动态面板“设置面板状态”—勾选“set dong1”—选择状态“停止循环”
选中动态面板“dong1”—元件交互与说明“状态改变时”—
- “添加条件”—面板状态“this”==状态“img1”（即描述“if 面板状态于 This == img1”）—元件“选中”—勾选“img1（形状）”—“值”“true” （这里的img1（形状）指的是状态栏里的原点按钮1）
- “添加条件”—面板状态“this”==状态“img2”（即描述“Else if 面板状态于 This == img2”）—元件“选中”—勾选“img2（形状）”—“值”“true” （这里的img2（形状）指的是状态栏里的原点按钮2）
完成后动态面板的交互如下图
第七步：动态面板“鼠标移出”交互设置（方法一）
情形一：不设置移出条件
选中动态面板“dong1”—元件交互与说明“鼠标移出时”—元件“隐藏”—勾选“left”和“right”—可见性“隐藏”—动态面板“设置面板动态”（重复第二步）
Bug：当鼠标从动态面板（图片）移入“left”和“right”按钮时，也同样属于鼠标移出动态面板，导致图片恢复滚动效果，“left”和“right”在隐藏和显示出反复闪屏转换。
情形二：在情形一的基础上设置移出条件
此步骤需要使用到函数和局部变量。鼠标的函数“Cursor.x”和“Cursor.y”，可以点击“fx”，再点击“插入变量或函数”来获取。
局部变量主要是点击“fx”—“添加局部变量”—“dong1”=“元件”“dong1”（如下图）
选中动态面板“dong1”—元件交互与说明“鼠标移出时”—添加条件—符合“任何”
- “值”“[[Cursor.y]]””<””值”“[[dong1.top]]” （含义就是：鼠标的y坐标小于动态面板“dong1”的上边界）
- “值”“[[Cursor.y]]””>””值”“[[dong1.bottom]]” （含义就是：鼠标的y坐标小于动态面板“dong1”的下边界）
- “值”“[[Cursor.x]]””<””值”“[[dong1.left]]” （含义就是：鼠标的y坐标小于动态面板“dong1”的左边界）
- “值”“[[Cursor.x]]””>””值”“[[dong1.right]]” （含义就是：鼠标的y坐标小于动态面板“dong1”的右边界）
这样子是不是就可准确实现鼠标移出效果了呢？
Bug：鼠标移出效果将会失效，即移出鼠标时仍然不会执行动态窗口滚动的效果。原因是，该动作只在鼠标移出动态窗口“dong1”的那一瞬间执行，此时，对于鼠标的坐标定位会早于移出动作执行，即鼠标坐标定位仍然停留在动态窗口内，因此条件判断不符合条件，动作无法执行。
情形三：在情形二的基础上缩小移出的判断空间范围
基于情形二的bug，鼠标定位会比移出动作执行早一点，可以转换思路，将判断范围缩小。
选中动态面板“dong1”—元件交互与说明“鼠标移出时”—添加条件—符合“任何”
- “值”“[[Cursor.y]]””<””值”“[[dong1.top+10]]” （上边界向下缩小了10）
- “值”“[[Cursor.y]]””>””值”“[[dong1.bottom-10]]” （下边界向上缩小了10）
- “值”“[[Cursor.x]]””<””值”“[[dong1.left+10]]” （左边界向右缩小了10）
- “值”“[[Cursor.x]]””>””值”“[[dong1.right-10]]” （右边界向左缩小了10）
这样子修改之后基本上可以满足使用要求，但仍存在bug。用极限思想思考一下，当鼠标移动速度无限接近无穷时，总会在达到一个临界速度后，在执行移动动态窗口所需的时间内移出距离超过缩短的边界值10，则又会出现情形二的bug。