教程动态面板实现广告循环播放

　　淘宝、天猫和京东等购物网站已经成为我们生活中的一部分，每每打开我们都可以看到有一个广告窗口，图片在里面循环滚动播放，那么它是怎么实现的呢？利用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元件交互与说明鼠标移入时：
　　元件显示勾选rightleft可见性显示
　　动态面板设置面板状态勾选setdong1选择状态停止循环
　　选中动态面板dong1元件交互与说明状态改变时
　　添加条件面板状态this状态img1（即描述if面板状态于Thisimg1）元件选中勾选img1（形状）值true（这里的img1（形状）指的是状态栏里的原点按钮1）
　　添加条件面板状态this状态img2（即描述Elseif面板状态于Thisimg2）元件选中勾选img2（形状）值true（这里的img2（形状）指的是状态栏里的原点按钮2）
　　完成后动态面板的交互如下图
　　第七步：动态面板鼠标移出交互设置（方法一）
　　情形一：不设置移出条件
　　选中动态面板dong1元件交互与说明鼠标移出时元件隐藏勾选left和right可见性隐藏动态面板设置面板动态（重复第二步）
　　Bug：当鼠标从动态面板（图片）移入left和right按钮时，也同样属于鼠标移出动态面板，导致图片恢复滚动效果，left和right在隐藏和显示出反复闪屏转换。
　　情形二：在情形一的基础上设置移出条件
　　此步骤需要使用到函数和局部变量。鼠标的函数Cursor。x和Cursor。y，可以点击fx，再点击插入变量或函数来获取。
　　局部变量主要是点击fx添加局部变量dong1元件dong1（如下图）
　　选中动态面板dong1元件交互与说明鼠标移出时添加条件符合任何
　　值〔〔Cursor。y〕〕amp；lt；值〔〔dong1。top〕〕（含义就是：鼠标的y坐标小于动态面板dong1的上边界）
　　值〔〔Cursor。y〕〕amp；gt；值〔〔dong1。bottom〕〕（含义就是：鼠标的y坐标小于动态面板dong1的下边界）
　　值〔〔Cursor。x〕〕amp；lt；值〔〔dong1。left〕〕（含义就是：鼠标的y坐标小于动态面板dong1的左边界）
　　值〔〔Cursor。x〕〕amp；gt；值〔〔dong1。right〕〕（含义就是：鼠标的y坐标小于动态面板dong1的右边界）
　　这样子是不是就可准确实现鼠标移出效果了呢？
　　Bug：鼠标移出效果将会失效，即移出鼠标时仍然不会执行动态窗口滚动的效果。原因是，该动作只在鼠标移出动态窗口dong1的那一瞬间执行，此时，对于鼠标的坐标定位会早于移出动作执行，即鼠标坐标定位仍然停留在动态窗口内，因此条件判断不符合条件，动作无法执行。
　　情形三：在情形二的基础上缩小移出的判断空间范围
　　基于情形二的bug，鼠标定位会比移出动作执行早一点，可以转换思路，将判断范围缩小。
　　选中动态面板dong1元件交互与说明鼠标移出时添加条件符合任何
　　值〔〔Cursor。y〕〕amp；lt；值〔〔dong1。top10〕〕（上边界向下缩小了10）
　　值〔〔Cursor。y〕〕amp；gt；值〔〔dong1。bottom10〕〕（下边界向上缩小了10）
　　值〔〔Cursor。x〕〕amp；lt；值〔〔dong1。left10〕〕（左边界向右缩小了10）
　　值〔〔Cursor。x〕〕amp；gt；值〔〔dong1。right10〕〕（右边界向左缩小了10）
　　这样子修改之后基本上可以满足使用要求，但仍存在bug。用极限思想思考一下，当鼠标移动速度无限接近无穷时，总会在达到一个临界速度后，在执行移动动态窗口所需的时间内移出距离超过缩短的边界值10，则又会出现情形二的bug。
　　第八步：新增动态面板dong2解决bug（方法二）
　　第七步提供的是一种实现移出效果的思路，虽然有小bug，但也是非常值得学习的，用在其他需要的原型中也是可以取到很好的效果的。
　　步骤七无法解决的问题，实质是无法做到让移入‘left’和‘right’按钮不包括在移出动态面板‘dong1’这个动作范围内。因此，我们可以转换思路将left、right按钮和状态栏都纳入到动态面板内，但因为left、right按钮和状态栏是不随图片滚动，所以无法放置在同一个动态面板内。我们将采取的解决方法是用另一个相同大小的动态面板dong2对动态面板dong1进行覆盖，并将left、right按钮和状态栏放置在动态面板dong2内。
　　1）放入动态面板dong2，设置大小W：850，H：400；将left、right按钮和状态栏剪切粘贴放入动态面板dong2的面板状态state1中，同时，重新设置第六步动态面板dong1与状态栏按钮img1和img2的选中交互。
　　2）设置动态面板dong2交互动作：
　　选中动态面板dong2元件交互与说明鼠标移入时元件显示rightleft动态面板设置面板状态勾选dong1选择状态停止循环
　　选中动态面板dong2元件交互与说明鼠标移出时元件隐藏rightleft动态面板设置面板状态勾选dong1选择状态previous向前循环循环间隔4000毫秒进入动画向左滑动向左滑动如果隐藏则显示面板
　　经过动态面板dong2对dong1的覆盖可以完美地解决地第七步中存在的问题，但又会出现新的问题，由于dong1已经被覆盖，所以第三步中设置的点击图片打开链接的功能将会失效。因此，我们需要借助一个矩形来使解决这一问题。
　　3）打开动态面板dong2的面板状态state1，设置一个透明的矩形大小与动态面板dong2完全重合，并将矩形置于底层。
　　4）选中矩形元件交互和说明鼠标单击时添加条件面板状态dong1状态img1（即if面板状态于dong1img1）链接打开链接打开位置当前位置勾选连接到url或文件超链接http：www。baidu。com（同理设置动态面板dong1img2时）
　　选中矩形元件交互和说明鼠标单击时添加条件面板状态dong1状态img2（即if面板状态于dong1img2）链接打开链接打开位置当前位置勾选连接到url或文件超链接www。taobao。com
　　至此，已经完美的实现广告循环播放效果，本文主要是跟大家交流对于实现循环播放效果的两种不同思路，如果认为后一种方法更好的可以将第三步和第七步多余的命令删除。
　　第一次写这种教案式的文章，可能写得有点啰嗦（我自己都觉得有些啰嗦，但又怕太简洁小白看不懂），希望大家多多包涵，有什么问题也希望大家可以指出来，以后会继续努力争取做的更好。谢谢阅读！