Axure 教程：内容展示——图片墙

效果演示

1. 自动轮播效果

2. 点击显示大图

使用说明

只需要填写中继器内容即可。

height：这张图片的高度；

picture：右键导入图片即可。

制作教程

（1）制作动态面板

新建一个动态面板1，设置好大小，选择背景色，案例中为黑色，取消自动调整内容尺寸；

在这个动态面板1下，再新建一个动态面板2，该动态面板选中自动调整内容尺寸，在动态面板2下面新建中继器。

（2）制作中继器

中继器内只需要新建一个图片文件就可以，垂直布局，行距按自己需要设置，案例行距是27。中继器表格如上图所示。

中继器事件每项加载时：

设置图片的尺寸，案例中宽是177，高是item.height，你们也可以自己设置适合的。

设置图片的值为item.picture。

（3）制作移动效果

载入的向下移动动态面板2，移动时间按需要设置。

向下移动结束时，触发向上移动，同样也是向上移动动态面板2。

向上移动结束时，触发向下移动，无限循环即可。

（4）制作点击放大图片效果

新建一个大图，点击中继器内图片时，显示该大图，然后设置图片值=item.picture，再根据图片设置显示图片的大小即可。

本期分享就完成了，如有喜欢该原型或者有什么疑问的都可以在评论区留言。

本文作者 @梓贤Vigo

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！