![](https://i-blog.csdnimg.cn/blog_migrate/daa000be8362879d0cc55273e1b7838d.webp?x-image-process=image/format,png)
效果说明:(1)页面载入后定时4s自动循环轮播;(2)图片向左滑动,原点指示随图片滑动变化;(3)鼠标移入原点可切换到对应的图片。
制作前准备:Axure8+3张图片
动效制作:
1.将page1命名为“图片轮播”——拖入“图片”控件,将其命名为“pic",并调整其样式大小为“375*200”。
![](http://upload-images.jianshu.io/upload_images/1914869-b997577f4e8abc1c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
2.双击“pic"控件添加图1,调整图片大小为375*200,将其转换为“动态面板”,再分别添加两个状态,在状态2,3添加图2和图3。
![](https://i-blog.csdnimg.cn/blog_migrate/6f40599ddffece709056a4cf3898797a.webp?x-image-process=image/format,png)
3.回到图片轮播页,拖入”椭圆“控件,调整大小及样式,复制2个,平行排列对齐。将原点1灰色填充,原点2,3白色填充。将3个原点组合并将其转换为"动态面板”,添加状态2(命名为2),状态3(命名为3),分别在状态2,3填充第2和第3个原点为灰色,其余为白色。
4.拖入3个“热区”控件,分别覆盖在原点1,2,3上(热区大小与圆大小一致),分别命名为point1,point2,point3。
![](https://i-blog.csdnimg.cn/blog_migrate/9d3ccec048d7c69247961ad76c2dd700.webp?x-image-process=image/format,png)
5.添加用例——自动循环轮播:
(1)用例1,选中“图片轮播”页面,选择交互“页面载入时”,添加动作“设置面板状态”,在配置动作做选择“pic动态面板”,选择状态为Next,向后循环,循环间隔4000毫秒(4s定时自动循环轮播),添加进入和退出动画为向左滑动。同样的,设置“point动态面板”,选择状态为Next,向后循环,循环间隔4000毫秒(4s定时自动循环轮播),添加进入和退出动画为逐渐。
![](https://i-blog.csdnimg.cn/blog_migrate/abb06ce92ebb49aa12291b16253d9786.webp?x-image-process=image/format,png)
步骤5基本上就完成了图片定时自动循环轮播的效果了