Axure8原型设计：动态面板实现图片轮播

　　我们在浏览网站时经常会看到图片轮播效果，那么，这个效果如何用Axure实现呢？
　　很多网站都会用到图片轮播，在原型设计中相信很多人都会用到，本和大家分享一下用动态面板实现图片轮播的效果。原型预览效果如下：
　　交互事件分析
　　图片轮播最主要的交互事件是自动切换及点击时手动切换，事件分析如下：
　　页面概要
　　1个动态面板：动态面板需新增4个面板，每个面板设置对应的轮播内容（本文用不同颜色的矩形代替）；
　　2个矩形：设置为“上一页”、“下一页”按钮，点击后切换面板内容；
　　4个椭圆形：点击后切换到对应的面板。
　　交互说明
　　1。动态面板设置
　　双击动态面板，点击“添加”按钮新增面板，并在每个面板添加对应轮播内容：
　　2。椭圆页面按钮交互样式
　　选中4个椭圆形，鼠标右键在菜单中选择“交互样式”菜单：
　　选择“选中”选项卡，选择“填充颜色”：
　　PS：第一个椭圆形页码需要设置为选中状态，当页面加载时，默认播放的是一张图片！
　　3。设置图片自动轮播
　　动态面板在页面载入时就开始自动轮播，鼠标点击页面选择“页面载入时”事件：
　　页面载入时动态面板轮播事件：
　　选择状态：Next，面板切换到下一个面板；
　　向后循环：勾选后，面板切换到最后一张时，会自动切换到第一张；
　　循环间隔：每张面板停留事件；
　　首个状态延时：如果不勾选页面将跳过第一个面板。
　　图片轮播时需显示当前轮播到第几个面板，该事件需在动态面板“状态改变时”事件中配置：
　　动态面板轮播判断动态面板轮播到第几个面板：
　　面板轮播到第一个面板，需选择第一个椭圆形页码，取消其他页码选中状态：
　　鼠标双击“状态改变时”用例，增加多个事件用例，设置面板切换时，椭圆形页面选中状态：
　　配置好后，预览原型图图片自动轮播就设置好啦
　　4。设置手动切换图片
　　设置上一页按钮：
　　选中“上一页”矩形，选中“鼠标单击时”事件：
　　在事件中选择“设置面板状态”动作，选择动态面板：
　　选择状态：Previous，面板切换到上一个面板；
　　向后循环：勾选后，面板切换到第一张时，会自动切换到最后一张。
　　设置下一页按钮：
　　选中“下一页”矩形，选中“鼠标单击时”事件：
　　在事件中选择“设置面板状态”动作，选择动态面板：
　　选择状态：Next，面板切换到下一个面板；
　　向后循环：勾选后，面板切换到最后一张时，会自动切换到第一张。
　　5。椭圆形页码点击设置
　　选择第一个椭圆形，选择“鼠标单击时”事件：
　　鼠标点击时需要将动态面板切换到对应的页面，第一个椭圆形切换到第一个面板，第二个椭圆形切换到第二个页码，以此类推：
　　点击时，除了需要切换动态面板，还需设置当前椭圆形“选中”状态，设置其他椭圆形“取消选中”状态：
　　6。图片轮播停止及恢复
　　当鼠标移入轮播区域时，图片要停止轮播，显示上一页、下一页按钮；当鼠标移除轮播区域时，图片恢复轮播并隐藏上一页、下一页按钮。可以将所有部件设置为一个组合，在组合的“鼠标移入时”、“鼠标移出时”添加事件：
　　源文件下载地址：
　　链接：https：pan。baidu。coms1GgSXN6BZMF8TaGWcIyjcw
　　提取码：98q2