使用工具：Axure pr 8.1版本。
制作效果如下图：banner自动播放的交互效果
D909221B-4DF9-4A37-AFD5-04721D46A9EC.png
自动播放效果的实现非常简单，思路就是制作两个动态面板，一个是图片的动态面板，一个是轮播图下边的点的动态面板。然后设置动态面板的相应状态即可。下面描述详细的步骤。
第一步：添加广告banner动态面板
1.1、拖动占位图或者图片到界面，设定大小，为了能表示是第几张图片，我又拖动了一个矩形设置无边，然后按住command键将占位图和矩形组合，然后右键转为动态面板，给动态面板命名为轮播广告banner。
6.pic.jpg
1.2、双击广告banner动态面板，添加三张相同的图片状态。如下图：复制banner1，添加banner2，和banner3。双击banner2进入banner2编辑面板将矩形内的文字改为banner2，banner3同样的操作。
956AA5EC-26E6-4CDF-90CD-085FD0869DE9.png
第二张图片示例：
7.pic.jpg
1.3、那么如何使banner自动轮播起来呢，广告banner动态面板右侧属性，点击载入时，进入下方选择页面。点击设置面板状态，选中广告banner面板。然后选择状态next，向后循环，2500毫秒间隔，进入动画退出动画选择执行是时间500毫秒。
07DAC0B1-9F32-41E7-A84F-6DD4EE8D177F.png
至此，广告banner的轮播效果完成，那么还有轮播的时候，底下的圆点应该要切换到对应的位置的圆点。
第二步：添加轮播圆点动态面板
2.1、拖动三个椭圆至界面，调整大小及距离。将第一个圆点设置成灰色，第二个第三个设置成白色。同样按住command键选中三个圆点右键组合，点击圆点组合右键选择转为动态面板，命名为轮播圆点。
3.pic.jpg
2.2、双击轮播圆点动态面板，同样复制三个状态，对应三张图片。如下图，双击圆点2进入圆点2编辑页面，将三个圆点中的第二个圆点设置灰色，其他两个白色。双击圆点3进入圆点3编辑页面，将第三个圆点设置灰色，其他两个白色。
5EE12FBB-8369-4E3F-900D-92C13BB93CA3.png
状态2：
4.pic.jpg
状态3：
5.pic.jpg
2.3、同样点击轮播圆点动态面板，界面右侧属性，点击载入时设置相应属性。
2.pic_hd.jpg
最后发布预览就可以查看广告banner轮播效果了。
网友评论