最近在做一个新项目的原型,需要实现轮播图需求,在网上查找了很多教程,博主似乎都默认了有些步骤读者可以独自完成,没有找到可以提供给对Axure RP使用不熟悉的小白的新手教程。于是在此记录下我的学习过程和操作方法。
1.建立面板,命名为Banner,在动态面板上右键选择“管理面板状态”:
2.添加状态:
3.选中每个状态,进入每个状态的编辑页面:
4.在State1面板中拖入图片控件并选择本地图片:
至此,每个状态的页面编辑完成(至于每个图片底部的小圆点,与轮播图制作相同,在另一个动态面板中添加与,还有一个比较偷懒的方法就是在状态编辑画布中加入与图片数量相同的小圆点控件并置于顶层,在State1中设置第一个小圆点变色,在State2中设置第二个小圆点变色…)。
下面开始为动态面板添加交互。
5.在“检视:动态面板”下“属性”中交互板块点击“更多事件>>>”,
6.选择“鼠标移入时”,设置“目的地”的状态为“停止循环”。
7.继续添加事件:鼠标移出时,页面继续轮播循环,定义循环的时间为2000ms(2s)。
8.为页面添加交互(同鼠标移出时的交互一样):续添加事件页面载入时。
至此,一个简单的轮播图效果就做好了。当然,要具体应用还需要添加图片底部的小圆点、左右图片切换箭头、图片载入效果(淡入淡出)等等。
相关推荐
用Axure RP9实现图片轮播效果 运用动态面板实现图片轮播效果,载入时设置面板状态,方便产品经理的组件
使用快速原型工具axure rp实现图片轮播功能
绘制的axure轮播图,使用动态面板进行绘制,所用到的都是使用最简单的方式进行的实现,优化了好几次,功能包含底部小圆点,支持点击切换至对应的页面,自动轮播与左右切换,帮助你快速实现轮播功能
Axure RP 8插件库,通过自己多年使用经验得到,Axure RP 8插件库共享给大家。欢迎下载。
Axure教程:用中继器做图片轮播.docx
AxureRP8元件库,多个库
AxureRP8-授权码亲测能用!! 2019-8-30日 ,AxureRP8-授权码亲测能用
Axure RP 8交互原型设计案例教程(微课版)-Axure源文件.rar
AxureRP8最全元件库,互联网APP原型图设计元件库
使用Axure RP9实现时间自定义选择框,设置文本框的类型,实现日期自定义选择,下拉选择框实现默认和自定义时间的切换选择
AXURE RP 8 常用的组件库 包含bootstrap风格库和elemant 风格
《Axure RP 8 实战手册》PDF清晰版
AXURE RP8实战手册 高清完整版PDF
本书是一本介绍使用Axure RP 8.0软件制作网站和APP原型的图书,通过对基础操作和实战案例的讲解,帮助读者深入了 解如何进行网站与APP平台的产品原型开发以及各种交互效果的实现。 本书共分为两篇。第1篇包含56个...
AXURE RP8实战手册(完整版)pdf 本书是一本介绍使用Axure RP 8.0软件制作Web和App原型的图书
Axure RP 8互联网产品原型设计(微课版)-素材.zip
很不错的一个元件库,能够很好的兼容Axure RP8,为您节约时间
[1_5]用Axure制作首页轮播图(上)Axure rp8_0教程萝卜队长-国语高清.FLV [1_5]用Axure制作首页轮播图(下)动态面板条件判断-国语高清.FLV [1_5]用Axure制作首页轮播图(中)-单选菜单的制作 萝卜队长原创-国语高清...
AxureRP8手机端模板保真元件
Bootstrap4 for Axure RP8 and 9 打开Axure RP8、9 在左侧资源库里面点+号,增加资源库。 或者打开Axure RP8、9安装目录,进入DefaultSettings\Libraries,复制资源到此目录并重启Axure软件即可看到。