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


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

效果图展示 https://e2qsae.axshare.com/#g=1&p=vcg%E5%AE%98%E7%BD%91

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

方法一:

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述
如果对你解决轮播效果有用的话,记得点赞哟~ 有什么不对的欢迎评论交流~嘻嘻嘻嘻嘻


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM