最近在学习Axure，想要实现滚动广告的效果，琢磨了好久，另外参考了网上的各种的参考资料，终于实现了部分效果。所以想把实现的方式跟大家分享一下。目标效果

亚马逊中国购物网站的首页中滚动广告的部分。参考网址：https://www.amazon.cn

2.实现步骤

2.1首先创建动态面板HomepageAdvertisement，然后创建5个State(state1-state5)HomepageAdvertisement动态面板

2.2 将广告页面分别放入不同的State中： 直接从亚马逊网站上截取的广告图片，然后将要实现的滚动广告分别放入不同的state中将广告图片放入state中将广告图片放入state中的显示效果HomePage

2.3设置广告的轮播效果: 选中动态面板HomepageAdvertisement，然后利用事件中的页面载入事件(onLoad)设置轮播效果选中事件：页面载入(onLoad)

在onLoad事件中，利用设置面板状态，具体设置轮播效果onLoad事件中设置轮播效果

2.4 设置广告页签(暂时这么叫，因为不知道专业的名词叫做什么)利用矩形作为设置广告页签，双击矩形，设置广告文字：广告1

设置单个广告页签

页面样式(Style)矩形命名为AdRect1(AdRect1～5)

矩形颜色填充：#000000

无阴影

不透明：100%

设置文字字体，颜色(#FFFFFF),大小，文字无阴影，居中显示设置单个广告页签

属性(Properties)

设置交互样式选中(Selected) #FFCC33设置‘选中’(Selected)的交互样式选择组(Selection Group)：SelectedAdRect(直接输入任意名字即可，不需要在别处创建，然后再引用)创建选择组

按照此步骤依次设置剩余四个广告页签，至此，五个广告页签的命名为AdRect1～5，五个广告页签的选择组(Selection Group)都为SelectedAdRect，并将五个广告页签放到动态面板HomepageAdvertisement的底部设置好全部的广告页签

2.5 实现广告和广告页签的联动效果选中HomePageAdvertisement

在‘属性’(properties)中选中‘面板状态改变’(OnPanelStateChange)

设置条件改变展示效果通过动态面板的状态来来实现和广告页签的联动效果

2.6 实现(1)当鼠标移入广告区域时，广告页签自动弹出，广告停止轮播(2)当鼠标移除广告页签时，广告页签收起，广告继续轮播新增动态面板：HomepageAdvertisement2， 此时不需要再新增状态(State)创建动态面板HomepageAdvertisement2设置交互事件“当鼠标移入时”(OnMouseEnter)的动作鼠标移入时发生的动作鼠标移入时发生的动作设置交互事件“当鼠标移出时”(OnMouseOut)的动作鼠标移除时的动作鼠标移除时的动作

2.7 实现(1)当移入广告页签时，对应的广告页签高亮显示，同事相应的广告显示，广告停止轮播(2)当鼠标移除广告页签并不在广告区域时，广告页签收起，广告继续轮播复制AdRect1～5 ，分别命名为AdRect1-1～5-1

AdRectX-1中的文字全部删除

设置AdRectX-1的‘样式’(Style)：无阴影，不透明：0%设置为透明度为0%“属性“(properties)中设置“鼠标移入事件”(OnMouseEnter)鼠标移入事件时的交互动作鼠标移入事件时的交互动作“属性“(properties)中设置“鼠标移出事件”(OnMouseOut)鼠标移出事件时的交互动作鼠标移出事件时的交互动作

3.操作完成，实现效果

需要说明的是，并没有100%实现其他的亚马逊首页的广告效果，因为剩下的效果比较简单，这里不再赘述。最终实现效果