Axure、墨刀制作轮播图

一、准备图片

首先准备三张大小相同的图片，因为轮播图图片大小不一致，会导致展示效果出现偏差，因此需保证图片大小相同。

二、创建动态面板

1、右键点击第一张图片，唤起菜单，选择“创建动态面板”

2、我们可以看到图片上面出现了一层遮罩，表示动态面板创建完成

3、双击动态面板，进入动态面板编辑界面

三、编辑界面介绍：

1. 点击绿色标题栏状态名称，可打开状态列表

2. 鼠标移入某一个状态，会出现复制和删除图标，点击可复制或删除该状态

3. 点击状态列表下方按钮，可新增空白状态

4. 点击绿色标题栏右侧关闭按钮，可关闭动态面板编辑界面

5、我们点击“复制状态”图标，复制出三个状态，分别放置三张图片。

 6、点击状态名称，可修改该状态名称。教学中我们不作修改，沿用默认名称。

7、我们接下来需要替换状态2与状态3的图片。点击State2，切换至状态2

8、替换图片。注意横坐标与纵坐标需与状态1中的图片保持一致。同理替换状态3图片

9、动态面板准备完成

四、设置交互

1、我们需要设置页面载入时，动态面板自动循环播放效果。

2、将右侧编辑栏切换至“交互”，点击“新增交互”。

3、选择事件为“载入时”，这样轮播图可以在页面载入时开始播放。

4、选择动作——设置面板状态。

5、选择我们需要制作的轮播图组件，这里选择“此组件”。

6、设置动态面板状态为“下一状态”，这样轮播图可以自动播放下一张图片。

7、我们还需进行其他设置，使轮播图更真实。

设置循环播放：勾选，能让轮播图播放到最后一张图片后，回到第一张图片

 设置进入动画、退出动画：这里都设置为向左滑动，500ms

 更多设置：设置重复间隔为2000ms，即2秒后播放下一张图片；设置延时播放2000ms，即页面加载2秒后开始播放下一张图片

8、保存后，即可看到交互面板出现我们刚刚设置的动态效果。

9、点击预览，即可看到制作好的轮播图

二、用墨刀制作轮播图

墨刀跟Axure不同，用户无需太多繁琐的步骤就可以做一个轮播图，因为墨刀直接把轮播图做成了一个动态组件，只需要拖动组件、添加图片，就可以实现

1. 使用轮播图组件

打开素材库-基础，找到“轮播图”这个组件，双击或拖拽，即可添加空白轮播图至画布。

2. 上传轮播图图片

在右侧“外观”面板，可以看到轮播图图片编辑区。鼠标移入，可以选择从本地上传图片，或从素材库选择图片；已添加的图片可以在此删除。轮播图默认含2张图片，我们可以在图片列表末尾找到“添加图片”按钮，点击即可添加轮播图图片。上传后的图片可以在此集中管理，一键编辑。

3. 设置轮播图属性

设置轮播图属性，使其符合我们的需求。可以设置滚动方向（含横向、纵向），是否自动轮播（默认开启），轮播时间间隔（默认2000ms）等。一键即可设置，十分方便。

4. 预览轮播图

点击工作栏右侧预览按钮，进入预览界面。

我们可以看到轮播图组件按照设置的播放方式，播放上传的图片。同时组件中还自动含有分页标记，无需手动制作即可知晓播放进度

以上是Axure与墨刀制作轮播图的方法。可以看到，Axure中没有内置的轮播图组件，所有效果与交互都需要使用动态面板进行制作，设置步骤较为繁琐，操作面板复杂，若需要分页效果则需另行制作；而墨刀将轮播图单独提炼，放入组件库，一键即可创建，并支持集中管理图片，增删替换都非常方便，自带的动效属性设置也简洁明了，极大方便了原型制作过程

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！