Axure教程:轮播图制作步骤详解


时间: 2021-08-03 09:52:08 人气: 24 评论: 0

不管是在PC端还是移动端,轮播图是常见的设计元素。下面详细讲解轮播图的制作步骤。

作为Axure初学者,把最近学到的记录下来,和大家一起学习。

如何实现轮播图:

  1. 循环展示轮播图**;
  2. 将圆点与轮播图一一对应;
  3. 实现前一张、后一张切换。

1、所需元件

首先我们需要准备以下元件:

动态面板(1000*400)、圆(3个,15*15)、向左、向右按钮图**(50*50)。

2、填充动态面板

①在动态面板中,填充内容,每个状态添加一个图**,这就是在轮播时展示的图**。

将动态面板命名为“轮播图面板”,并在动态面板中添加3个状态,分别命名为“轮播图1”、“轮播图2”、“轮播图3”。如下图:

双击面板中的状态,在每个状态中添加一张图**。如下图:

3、添加事件

(1)循环展示图**

设置在载入时进行自动轮播动作。

点击轮播图面板,在属性中双击【载入时】。

在元件中选择【设置面板状态】,在右侧配置动作中,选择【轮播图面板】,选择状态【NEXT】,配置如下图。点击确定。

(2)轮播图与选项圆点对应

①将圆点设置成选项组。(选项组作用:同一个选项组的元件,当其中一个部件被选中时,系统**自动取消选择其他部件。)

同时选中三个圆(圆从左至右分别命名为“1”、“2”、“3”),鼠标右键,点击【设置选项组】,给选选项组命名后,点击确定。

②设置面板状态与圆点的对应关系。

面板状态为轮播图1时,对应圆点1;面板状态为轮播图2时,对应圆点2;面板状态为轮播图3时,对应圆点3。

点击轮播面板,在属性中双击【状态改变时】,【添加条件】,点击确定。条件状态设置如下:

添加【选中】动作,选择椭圆1,点击确定。如下图:

重复以上操作两次,条件为面板状态==轮播图2时,选中椭圆2;条件为面板状态==轮播图3时,选中椭圆3。如下图:

③点击圆点时展示对应图**,以及图**进入、退出方式的设置。

点击椭圆1,双击【鼠标点击事件】,【设置面板状态】,选择【轮播图1】,选择动画方式。如下图:

④点击圆点出现对应图**后,需要循环展示图**,所以还需加上以下步骤。

点击【设置面板】,选择【NEXT】状态,设置循环效果,如下图:

对椭圆2、椭圆3进行同样的动作设置(椭圆2选择状态为轮播图2,椭圆3选择状态为轮播图3。)。

(3)上一张/下一张操作

①点击向左按钮时,展示前一张图**。如果当前图**为第一张轮播图,则点击向左,出现第三张轮播图。

选中【向左】元件,添加【鼠标单击时】,添加条件,如下:

【设置面板状态】,选择状态【轮播图3】,设置动画状态,如下图:

循环设置:再次点击【设置面板状态】,选择状态【NEXT】,设置循环,点击确定。如下图:

②如果当前轮播图不是第一张图**,则显示前一张图**。

选择【向左】元件,【鼠标单击事件】添加用例,添加条件,面板状态不等于轮播图1时,如下图:

【设置面板状态】,勾选【轮播图面板】,选择【Previous】状态,设置动画。

循环设置:再次点击【设置面板状态】,选择状态【NEXT】,设置循环,点击确定。如下图:

③点击向右按钮,出现下一张图**。如果当前图**为第三张轮播图,点击下一张,出现第一张图**。

选中【向右】元件,添加【鼠标单击时】,添加条件,如下:

【设置面板状态】,选择状态【轮播图1】,设置动画状态,如下图:

循环设置:再次点击【设置面板状态】,选择状态【NEXT】,设置循环,点击确定。如下图:

④如果当前图**不是第三张轮播图,点击向右按钮,出现下一张图**。

选择【向右】元件,【鼠标单击事件】添加用例,添加条件,面板状态不等于轮播图3时,如下图:

【设置面板状态】,勾选【轮播图面板】,选择【NEXT】状态,设置动画,如下图:

循环设置:再次点击【设置面板状态】,选择状态【NEXT】,设置循环,点击确定。如下图:

通过以上步骤,就可以在Axure中完成轮播图的制作啦。点击预览,即可看到轮播图的效果了~

后续笔者**更新一系列Axure制作步骤详解。

文件分享:http://pan.baidu.com/s/1jIAD2Vc ,密码:272m

 

本文由 @ Olga93 原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自PEXELS,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
4人打赏
---蛙鱼源码WAYUYM.COM---专业提供网站模板,网站源码下载,教程培训,程序插件,网站素材等建站资源,主要收集各类精品源码资源,包含CMS程序模板、网站源码、游戏源码、APP源码等 ,所有资源都没有水印适合搬运,我们致力于打造一个优秀的建站资源共享学习平台!

专业厂家,设备先进,技术力量雄厚,自动化生产技术先进,产品质量符合国家标准,价格合理,https://www.69shenlan.com/,具有质量保证,生产及时,交货快捷的特点。 我们的宗旨:做我们擅长的事,希望用我们的创意和创意为客户实现战略定位,塑造品牌,强化形象!
我们的要求:坚持“优质产品、优质服务、优惠价格、快速交货”的经营方针,努力开拓市场,真诚为客户服务! 我们的发展:以独特的专业和专业精神,https://www.69shenlan.com/1:1--

Axure教程

评论