Axure如何实现图片轮播效果!三分钟搞定!

Axure在绘制高保真原型图时如何实现图片轮播呢?

效果图展示

// 注 意:这个效果图是上一篇博客的成品效果图DAY2_前端入门准备篇(二)里面涵盖了图片轮播。

方法一:

1、首先打开Axure软件,新建一个页面,拖放一个动态面板(大小必须大于等于你要制作的轮播图片的大小)。成果如下图所示:

Axure如何实现图片轮播效果!三分钟搞定!

2、双击动态面板区域,弹出面板状态管理框,添加动态面板状态(面板状态个数由自己的轮播图片的张数决定)本文以4张图片为例,点击确定,则该动态面板获取4个不同的状态。

Axure如何实现图片轮播效果!三分钟搞定!

3、双击动态面板的某一个状态,进入该状态的编辑区域,接着在该区域内放置需要轮播的图片(大小必须小于等于动态面板的大小,超出动态面板的边界不会被显示出来)。其余三个状态也是一样的操作,在动态面板内添加图片。效果展示如下:

Axure如何实现图片轮播效果!三分钟搞定!
Axure如何实现图片轮播效果!三分钟搞定!
Axure如何实现图片轮播效果!三分钟搞定!

Axure如何实现图片轮播效果!三分钟搞定!
Axure如何实现图片轮播效果!三分钟搞定!
Axure如何实现图片轮播效果!三分钟搞定!

4、点击页面空白区域(不要选中任何原件),为该页面添加用例,选中页面载入时,设置如下图所示的动作,点击确定进行保存。

Axure如何实现图片轮播效果!三分钟搞定!

5、点击预览,在浏览器中查看效果即可。

Axure如何实现图片轮播效果!三分钟搞定!
如果对你解决轮播效果有用的话,记得点赞哟~ 有什么不对的欢迎评论交流~嘻嘻嘻嘻嘻