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

淘宝、天猫和京东等购物网站已经成为我们生活中的一部分，每每打开我们都可以看到有一个广告窗口，图片在里面循环滚动播放，那么它是怎么实现的呢？利用Axure软件我们可以简单实现，下面我将向大家分享一下具体步骤，希望能够帮助到大家。

原材料：

图片、动态面板、按钮、状态栏

注意命名，状态栏内的原点按钮命名和对应的图片一致，后面有妙用；按钮和状态栏都可以用矩形轻松制作而成。

步骤/方法 第一步：设置动态面板内容

动态面板状态设置成两层动态状态，分别是img1、img2，内置相应的图片，并将图片和动态面板的大小调成一致，本次案例中的大小是W:850,H:400。

在主界面将按钮和状态移入动态面板框内，调整好位置，设置left和right按钮的默认状态为“隐藏”。

第二步：设置动态面板滚动状态

选中动态面板“dong1”—元件交互与说明“载入时”添加用例—动态面板“设置面板状态”—dong1（动态面板）—“previous”“向前循环”“循环间隔4000毫秒”—进入动画“向左滑动”“向左滑动”—“如果隐藏则显示面板” （以上秒数可以自由选择）

第三步：设置点击图片打开广告链接的交互动作

双击动态面板“dong1”进入动态面板状态管理—进入面板状态“img1”—选中图片“img1”—元件交互与说明“鼠标单击时”—链接“打开链接”—打开位置“当前窗口”（也可以选中新窗口）—勾选“链接到url或文件”—超链接“”（输入你的目标链接地址）（“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”—元件交互与说明“状态改变时”—