axure轮播图怎么设置循环轮播_Axure教程:轮播图制作步骤详解
不管是在PC端还是移动端,轮播图是常见的设计元素。下面详细讲解轮播图的制作步骤。
作为Axure初学者,把最近学到的记录下来,和大家一起学习。
如何实现轮播图:
循环展示轮播图片;
将圆点与轮播图一一对应;
实现前一张、后一张切换。
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制作步骤详解。
本文由 @ Olga93 原创发布于人人都是产品经理。未经许可,禁止转载。
题图来自PEXELS,基于CC0协议
给作者打赏,鼓励TA抓紧创作!赞赏
4人打赏
axure轮播图怎么设置循环轮播_Axure教程:轮播图制作步骤详解相关推荐
- php轮播怎么调整图片大小,微信小程序内轮播图怎样设置成自适应高度
这次给大家带来微信小程序内轮播图怎样设置成自适应高度,微信小程序内轮播图怎设置成自适应高度的注意事项有哪些,下面就是实战案例,一起来看一下. 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前 ...
- 滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图)
滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图) 每一步都有详细的注释: <!DOCTYPE html> <html lang="en"> &l ...
- 横向自动轮播图html代码,JavaScript实现PC端横向轮播图
JavaScript实现PC端横向轮播图 发布时间:2020-09-09 02:10:03 来源:脚本之家 阅读:100 作者:菜鸟向往蓝天 本文实例为大家分享了JavaScript实现PC端横向轮播 ...
- html轮播图速度加快,jQuery按需加载轮播图(web前端性能优化)
引言 关于幻灯轮播图,想必大家都不陌生,尤其是基于 jQuery 的,插件.代码网上一搜一大堆,但是真正符合自己需求的几乎没有,所以我要打造一个符合自身需求,经得起广大网民考验的 jQuery 轮播图 ...
- python画三维平面-Python 绘制酷炫的三维图步骤详解
通常我们用 Python 绘制的都是二维平面图,但有时也需要绘制三维场景图,比如像下面这样的: 这些图怎么做出来呢?今天就来分享下如何一步步绘制出三维矢量(SVG)图. 八面体 我们先以下面这个八面体 ...
- python画3d图-Python 绘制酷炫的三维图步骤详解
通常我们用 Python 绘制的都是二维平面图,但有时也需要绘制三维场景图,比如像下面这样的: 这些图怎么做出来呢?今天就来分享下如何一步步绘制出三维矢量(SVG)图. 八面体 我们先以下面这个八面体 ...
- 佳能2206打印机扫描显示连接计算机,佳能网络扫描怎么设置?图文步骤详解,29年打印经验总结...
原标题:佳能网络扫描怎么设置?图文步骤详解,29年打印经验总结 第一步:在电脑硬盘的根目录中建立共享文件夹,名字随便取,(建议不要建在桌面上),以win7为例:(适用于canon ir 2530i) ...
- python画漏斗图_python绘制漏斗图步骤详解
pyecharts中的Funnel函数可以绘制漏斗图,自动根据数据大小生成由大到小自上而下排列的一个漏斗样的图形. 1.导入Funnel模块. from pyecharts import Funnel ...
- matlab怎么画两个自变量的图_水彩怎么画 水彩画自学教程 水彩画入门到精通步骤图...
水彩怎么画 水彩画自学教程 水彩画入门到精通步骤图!水彩怎么画 水彩画自学教程 水彩画入门到精通步骤图! 如果你的基础太薄弱,不建议自己瞎摸索,你可以关注一下公众号:每日学绘画,有很多的绘画视频,非常 ...
最新文章
- centos7 安装mysql 解决:Failed to restart mysqld.service: Unit not found
- 程序员的比较工具大杂烩
- java编译POSTGRESQL_Java连接PostgreSQL数据库(安装环境 + 简易测试代码)
- Spring Cloud Zuul网关 Filter、熔断、重试、高可用的使用方式
- 《Apache Kafka实战》读书笔记-调优Kafka集群
- 发消息给非windows窗体程序
- 大事件后台管理系统开发实战(上)
- 初级黑客安全技术命令详解
- ionic4生命周期
- Ubuntu打印机控制命令笔记
- C++ delete的三种面貌
- 【附】Python安装
- github中markdown语言的使用规则
- OSEK-NM直接网络管理一:概念部分
- 单路电压表c语言编程,基于ADC0809和AT89S52单片机的数字电压表的设计
- Unity问题(1)——mesh法线反转
- “科林明伦杯”哈尔滨理工大学第十届程序设计竞赛——H.直线【JAVA大数 | Python】
- 使用Python获取股市融资融券数据并绘制曲线
- 如何把带图片html转为doc,教您一招:如何将图片里面的文字转成word格式并能编辑...
- chrome电脑棒 刷linux,其实已经够用:华硕Chromebit电脑棒评测
热门文章
- 2015.7.9(1000股涨停,未按分段交易中国重工、中国软件减仓失误!补做大智慧、中色股份追高,而后控制仓位预防高开跳水——重新整理分段交易原则)发现中软吸筹率极高...
- 简单方法解决缓存雪崩问题
- 别人推荐的一首好听的歌
- wifi不断重连报错:eSIR_MAC_CLASS3_FRAME_FROM_NON_ASSOC_STA_REASON解决
- PyQt5系列(四)Mac10.12上安装Cocoapods
- 如果看了此文,你还不懂傅里叶变换,那就过来掐死我吧(完整版)
- iOS 使用FFmpeg
- wpf之MVVM绑定背景色
- LED显示驱动(七):图层基本测试总结
- nginx日志打印header_小水敲黑板--Nginx+Keepalived实现负载均衡和高可用