Axure之实现图片自动循环切换效果
开心一笑
【男女的思维的确是不同,最近和老婆商量锻炼的事,因为我们俩都胖了,要开始锻炼。我第一个想到的是,安排在什么时间比较好;而她率先下单买了套运动服。昨天已经送到~~~】
视频教程
大家好,我录制的视频《Java之优雅编程之道》已经在CSDN学院发布了,有兴趣的同学可以购买观看,相信大家一定会收获到很多知识的。谢谢大家的支持……
视频地址:http://edu.csdn.net/lecturer/994
提出问题
axure如何实现图片自动循环切换效果???
解决问题
1.新建一个项目。
2.在 index 页面下,拖入一个【动态面板】,宽:450,高:250,双击面板,在弹出的页面中,添加5个 state 状态。
3.双击 【state1】,在弹出的页面中,拖入一个【图片】元件库。设置图片的大小和动态面板的大小一致,
4.双击【图片】元件,给图片上传一张图片,设置图片宽度和高度与动态面板一致。
5.重复【步骤3】和【步骤4】,给 state2,state3,state4,state5上传图片,最终效果如下:
6.回到 【index】页面,拖入一个【椭圆形】元件到动态面板,调整椭圆形的宽度和高度到合适的大小,设置选项组名称为 Tag ,设置元件名称为 Tag5 。如下图:
7. 重复【步骤6】,复制粘贴第一个椭圆,总共复制4个一模一样的椭圆,同时设置选项组名称都为Tag,元件名称依次为:Tag4,Tag3,Tag2,Tag1。最终效果如下图:
8. 在【index】页面中,单击【动态面板】,在左边属性中,单击【载入时】事件,选择添加用例,在弹出的窗口中。
1)添加动作中,选择【设置面板状态】,在配置动作中,依次按照下面图片中的箭头,选择状态:Next,勾选【向后循环】,【循环间隔2000毫秒】,单个状态耗时2000毫秒后切换等等,最后点击确定。
9.弄到这里已经完成大半了,坚持下去。还是在【index】页面,单击【动态面板】,在右边属性中,点击【状态改变时】,添加用例。
10.在弹出的窗口中,点击【添加条件】,在弹出的窗口中,选择【state1】,点击确定。
11.在【步骤10】的基础上,继续添加动作【选中】,在配置动作中,选择第一个【椭圆形】所对应的元件,假如是Tag1,点击确定。
12.重复【步骤9】【步骤10】和【步骤11】,依次添加【case2】【case3】【case4】【case5】,结果如下:
解释下:添加这些case的目的是,图片切换时,下面的小圆心的样式也可以跟着切换。只有这个目的。
13.所有操作完成后,点击预览,在浏览器上查看效果。好了,大功告成,工资直接加500.
14.爱你~~~
读书感悟
来自 格雷戈·莫顿森《三杯茶》
- 敬上一杯茶,你是一个陌生人; 再奉一杯茶,你是我们的朋友; 第三杯茶,你是我的家人,我将用生命来保护你。
- 他让我,让我们所有人认识到:只要你相信自己,就能做成任何事情。
- 人一旦有了恐惧,便失去了智慧。
经典故事
【一只猴子,肚子被树枝划伤,流了很多血。它见到一个猴子就扒开伤口说,你看我的伤口好痛。每个看见它伤口的猴子都安慰它,告诉它不同的治疗方法。它就继续给朋友们看伤口听取意见,后来它感染死掉了。一个老猴子说,它是自己把自己弄死的。痛,说一次就痛一次,不如自己默默愈合。启发:你若不坚强,懦弱给谁看~~~】
大神文章
【1】AxureRP8实战手册-案例12(动态面板:自动图片切换)
其他
如果有带给你一丝丝小快乐,就让快乐继续传递下去,欢迎点赞、顶、欢迎留下宝贵的意见、多谢支持!
Axure之实现图片自动循环切换效果相关推荐
- html中图片自动循环滚动代码,实现长图片自动循环滚动效果
实现思路 滚动效果用实现.有个方法,可以滚动到指定位置(有滚动效果,不是直接到指定位置),不了解的看这里种定位滚动方式演示.每一个Item是一张长图,这样首尾相接滚动起来(滚到无限远)就是无限循环的效 ...
- axure 图片切换图片的交互_Axure教程:在动态面板里面设置图片自动/手动切换
原标题:Axure教程:在动态面板里面设置图片自动/手动切换 本文作者分享自己做过的一个PC端的高保真原型,来教大家,如何在动态面板里面设置图片的自动和手动的切换. 给大家分享自己做过的一个案例,来自 ...
- html中图片自动循环滚动代码,JavaScript代码实现图片循环滚动效果
1.概述 循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片. 2.技术要点 主要应用setTimeout()方法实现图片的循环滚动效果.se ...
- html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
- Axure的动态面板制作tab切换效果
最近进行机房合作画原型图的时候用到了Axure画图软件,画出来的图感觉棒棒哒!在画结账窗体的时候确实遇到了一些问题,因为有动态效果图,点击不同的Tab时要有不同的界面显示,所以学习了一下! 结合注册窗 ...
- Flexslider图片轮播、文字图片相结合滑动切换效果
Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效 ...
- Axure RP9——【图片放大预览效果】
图片放大预览效果 目录 I.实现效果 II.实现步骤 I.实现效果 一般适用于做电商平台图片的放大预览,以此更方便我们看清内容细节. 鼠标停留在商品大图时,会出现一个预览区域,并且右侧会出现预览区域的 ...
- web前端 运用CSS动画 实现图像的幻灯片 自动播放 切换效果
先看一下浏览器运行结果: 一. 最初用"background-image"背景图片属性定义动画,结果幻灯片切换时没有上下滑动的效果. 仅用到HTML和CSS,未用javascrip ...
- JS图片轮播切换效果实现
效果演示地址:http://6689.one/WebEffects/pictureplay.html 实现代码如下: </pre> <pre name="code" ...
最新文章
- 052_CSS3 appearance属性
- java注解判断字段是否存在_使用注解和反射判断指定的字段不能为空
- 史上最全SQL优化方案
- python 线程同步_Python并发编程-线程同步(线程安全)
- php 查看当前字符编码,PHP检测当前字符编码并转码
- Azkaban编译和安装模式
- 7. 关于IntelliJ IDEA删除项目
- 一日一技:ASP.NET Core 判断请求是否为Ajax请求
- tomcat启动成功 未加载项目_喜讯!济宁医学院附属医院SPD项目成功启动
- 像亲和数一样亲密无间(洛谷P1851题解,Java语言描述)
- 我是 LinkedIn 的 SRE ,我把 LinkedIn 搞挂了
- php 判断是否是16进制,如何求解16进制字符串的验证
- PHPCMS整合UCENTER后登陆问题
- mysql数据库攻击与防御_专题:SQL注入攻击与防御_51CTO.COM
- 机器人学导论——操作臂运动学
- 微信小程序 地图显示
- 计算机建模步骤,cad建模步骤
- 金山词霸2009牛津with SP3完全破解版(含全部本地词库和语音包)
- 让大象飞中的工作法(一)
- 中国染料医用激光器行业市场供需与战略研究报告