在Axure8.0中创建简单交互事件

banner轮播

在浏览网页网页时，我们经常看到精美的banner还有动态效果，但是在网页中这种动态交互事件大多是用JS实现的，那我们在Axure中也可以实现这种动态效果。

1.打开Axure，新建一个项目。在元件库拖入一个“动态面板”到工作区域，并设置好尺寸。

2.在右侧“概要”，动态面板下方，单击“+”号，创建几个state页面；

3.双击打开state页面，在虚线框内放入图片，一个state页面放入一张图片，调节图片大小，让图片尽量位于虚线框内（因为框外的内容显示不出来）；

4.图片放好后，我们再回到刚开始的页面（page3），在图片左右加上一个按钮，并设置为隐藏，让按钮实现左右切换图片的功能，

5.放好按钮以后，我们把按钮和动态面板组合起来（为了避免出现按钮闪烁不灵的情况），在“概要”下面选中两个按钮和动态面板，单击击鼠标右键，选择“组合”；

6.布局好以后，就要开始实现动态效果了。先给按钮设置一个点击事件：先点击“设置面板状态”，勾选刚刚到图片的动态面板，并在下方“选择状态”的下拉菜单栏中选着“Next”，勾选向后循环，则这个按钮实现的是点击切换带下一张图片；点击切换上一张图片步骤相同，在选择状态时，选择“previous” 勾选“向前循环”，确定；

7.划重点了！！这一步是实现自动播放和鼠标移上去停止播放并出现两个按钮的关键。

（1）单击“动态面板”，在其上方选择“载入时”，单击进入选择“设置面板状态”，勾选该动态面板，在其下方的选择状态选择“Next”，“向后循环”“循环间隔**毫秒”“首个状态延时**秒”，确定；

（2）选择该组合，单击上方的“更多事件”，在更多事件中单击“鼠标移入时”，①在出现的页面中选择“显示”，选择两个按钮，（实现鼠标移入时出现两个按钮），②选择“设置面板状态”，勾选该动态面板，下方“选择状态”设为“停止循环”，（实现鼠标移入时停止播放图片）确定；

（2）“组合”→“更多事件”→“鼠标移出时”→①“隐藏”→选择两个按钮→确定（鼠标移出时隐藏按钮），②

（3）“组合”→“更多事件”→“鼠标移出时”→“设置面板状态”→勾选该动态面板→选择状态选择“Next”，→“向后循环” “循环间隔**毫秒”  “首个状态延时**秒”，确定。

好了，现在所有步骤都完成了，按F5在浏览器中预览一下效果吧。

喜欢的话给个心心支持一下吧  (๑╹╹)ﾉ""