Axure绘制轮播图
相信大家在日常的原型绘制中经常会进行轮播图的设计，轮播图对于产品的重要性，在这里就不给大家做过多的强调了，本文主要是教大家如何使用动态面板制作轮播图，废话不多说，直接上干货
一、效果展示
二、功能分析
首先先观察一下轮播组件中的元素，包含以下几个元素
需要实现的功能如下：
①针对于主展示区的图片，支持自动轮播，隔2秒自动切换至下一张，最后一张自动切换到第一张
②点击左右的箭头切换至上一张或下一张
③根据自动轮播的图片展示，点亮当前图片所在的位置
三、原型制作
选用的仍然是万能的动态面板去实现
1.拖入动态面板组件
对动态面板进行命名；并添加与需要的轮播图张数相等的state面板，进行命名
为每一个state中都添加对应的矩形，方便查看切换效果，如果是真实的绘制的话，大家可以找三张不同的图片
为动态面板设置交互效果，当载入时向后循环切换state
2.制作小圆点
首先拖入椭圆原件，并为其设置选中的效果，具体大家可以自定义选中后的效果
设置点击小圆点时的交互事件①点击跳转至对应的轮播图②点击时选中当前小圆点
复制两个小圆点，同时修改第二个和第三个小圆点的交互事件
选中三个小圆点，右键将三个小圆点设置到相同的选项组，因为这个是单选的想过，这样做方式最便捷
默认将第一个小圆点设置为默认选中
3.绑定小圆点和动态面板的对应关系
显示对应的照片时，选中对应的小圆点；设置动态面板状态发生变更时，选中对应的小圆点
切记添加向后循环的交互事件，否则点击小圆点后会停止轮播
然后依次为每个状态都设置对应的交互事件
4.绘制左右的箭头按钮
可拖入矩形，变换成三角形后旋转，如果为了样式好看可以自己下载对应的矢量图，绘制两个左右的箭头
首先为左箭头添加交互事件，判断点击时当前是不是展示的第一张，如果是第一张，则切换至最后一张，如若是第二张和第三张，则切换至上一张，可添加上切换的动画
再为右箭头添加交互事件，判断点击时当前是不是展示的第三张，如果是第三张，则切换至最第一张，如若是第一张和第二张，则切换至下一张，可添加上切换的动画
到此完整的轮播图效果就制作完成了
Axure绘制轮播图相关推荐
- Axure RP9 轮播图交互
目录 一.步骤 二.链接预览 一.步骤 (1) 第一步先拉入一个动态面板然后加入三个状态分别是state1.state2.state3: (2)第二步在三个不同的状态里各方入一个图片(这里图片做效果 ...
- axure9轮播图做法与按钮思路
axure rp9 轮播图做法 目前正在自学rp9,正好做到了轮播图这一块,发现和rp8还是有很多的不一样,不仅是页面上,同时还有部分操作上. 首先创建一个动态面板 然后双击动态面板,在顶部会出现动态 ...
- 画布之轮播图片HTML5,Axure原型设计之轮播图
轮播图是网页设计或者APP设计常见的元素,学会使用axure原型工具制作轮播图对制作PC端或者移动端的原型都非常有帮助.现在讲讲如何使用axure8.0制作轮播图原型~~ 步骤一:(轮播图动态面板) ...
- 【python教程入门学习】用pyecharts绘制带动画效果的“时间轮播图
今天我们要分享的是一个数据可视化的案例. 在讲述本文之前,为了满足大家的好奇心,我们先来看看最终做出来的效果呈现. 不管学习什么技术,官网是最好的老师.对于pyecharts绘图库,知道了他的绘图原理 ...
- 好玩！PyEcharts 绘制时间轮播图
作者 | 黄伟呢 来源 | 数据分析与统计学之美 这里我需要事先说明一点:不管学习什么,官网是最好的老师.对于pyecharts绘图库,知道了它的绘图原理后,不管绘制任何图形难度并不是很大,唯一难住我 ...
- 技术解析：如何用pyecharts绘制时间轮播图
在前天的文章『用python制作动态图表看全球疫情变化趋势』中,由于篇幅原因,在数据处理与数据可视化相关内容上我们只是简单带过,那么我将以python小小白的角度去还原如何处理数据与数据可视化.本文为 ...
- axure轮播图怎么设置循环轮播_Axure教程：轮播图制作步骤详解
不管是在PC端还是移动端,轮播图是常见的设计元素.下面详细讲解轮播图的制作步骤. 作为Axure初学者,把最近学到的记录下来,和大家一起学习. 如何实现轮播图: 循环展示轮播图片: 将圆点与轮播图一一 ...
- axure原型怎么让文字自动换行_Axure动态面板教程（快速入门+轮播图案例）
动态面板(Dynamic Panel)是Axure的核心功能之一,但很多初学者都反馈理解有难度,今天用一个简单的例子让大家快速掌握它,并且学会做一个常用的轮播图. 12月21日更新:B站视频版教程: ...
- Axure高级功能(变量、动态面板[轮播图]、中继器)
文章目录 一.变量的使用 1.局部变量 2.全局变量 二.动态面板 1.设置动态面板 2.轮播图案例 3.手机页面显示 超出屏幕区域内容的处理 方式一 使用内联框架 方式二 使用动态面板 三.中继器 ...
最新文章
- 机器学习建模神器PyCaret已开源！提升效率，几行代码轻松搞定模型
- JAVA实现旋转数组的最小数字问题（《剑指offer》）
- Windows核心编程 第七章 线程的调度、优先级和亲缘性(上)
- c++ DirectShow播放任意格式的视频
- php mysqldb 数据库切换,Python MySQLdb模块连接操作mysql数据库实例
- 客户端通过网口启动可过去的ip_西安交通大学16年3月课程考试《网络组网技术综合训练》作业考核试题...
- underscore源码学习笔记（一）
- 欢迎使用CSDN-markdown编辑器231
- DCDC芯片内部模块原理
- ISBN（国际标准书号）
- LeetCode刷题-反转字符串中的元音字母
- shell实现论坛灌水机
- C++17之std::any
- 360一键wifi共享 v5.3 绿色免费版
- 使用samtools来对sam/bam/cram相互转换
- 英文版WIN7系统中打开软件中文乱码解决办法
- wifi网络为什么总是断线 (by quqi99)
- 网页上的内容无法选中复制该如何解决？
- 利用python从网络上爬取图片_一篇文章教会你利用Python网络爬虫抓取王者荣耀图片...
- 【Java】装箱拆箱