[原型设计]Axure制作首页轮播图片切换效果
来源:互联网 发布:工业动画制作软件 编辑:程序博客网 时间:2024/06/09 15:35
1、新建Axure PR文件,取名“Axure制作首页轮播图片切换效果”
2、获取素材,进入36Kr官网主页,获取轮播图片素材。
3、拖拽动态面板控件Dynamic Panel,取名“轮播图片”,设置6个状态分别取名为1、2、3、4、5、6,动态面板大小设置为和图片大小一致747*231px。
4、双击动态面板1-6每个状态,分别将图片1-6添加到动态面板状态中。
5、回到Home主页,在动态面板“轮播图片”左右分别添加一个图片控件Image(从Widgets控件栏拖拽),分别取名left、right,位置、大小根据需要自由调整。
6、将left、right图片分别替换成选择的素材图片。两个图片位置和大小自行调整。
7、选中两个Image控件left、right,单机右键,选择Set Hidden,设置隐藏。
设置隐藏后的效果如下
8、为动态面板“轮播图片”设置自动定时轮播效果。选中动态面板“轮播图片”控件,在Page Interactions栏添加OnPageLoad事件,选择Dynamic Panels——Set Panel State——Set the state选择Next——勾选Wrap from last to first和Repeat every 2000 ms(设置每两秒钟轮换一张图片)——选择Animate In和Animate Out分别为slide left,表示从左滑入和从左滑入,设置滑入滑出时间默认为500ms。
9、添加动态面板“轮播图片”鼠标事件。鼠标移到图片上时,自动显示左右两个方向按钮。选中动态面板“轮播图片”,添加OnMouseEnter事件,选择Widgets控件栏,选择Show/Hide,为Left、Right图片控件设置显示效果。
10、添加动态面板“轮播图片”鼠标事件。鼠标移出图片时,自动隐藏左右两个方向按钮。选中动态面板“轮播图片”,添加OnMouseOut事件,选择Widgets控件栏,选择Show/Hide,为Left、Right图片控件设置隐藏效果。
11、为Image:Left、Right分别添加事件,点击Left图片显示上一张,点击Right图片显示下一张,选中Left和Right图片控件,设置Onclick事件,如下。
Left按钮为显示上一张,图片从左向右滑动,Select the state选择Previous,Animate In 和Animate Out选择slide right。
12、演示效果如下
13、如需演示素材和rp源文件,如下留言获取。
如需素材包及rp源文件,请留言联系作者获取。
- [原型设计]Axure制作首页轮播图片切换效果
- [原型设计]Axure制作鼠标悬停图片切换效果
- Axure RP 京东首页二级菜单、轮播幻灯片、模糊搜索、倒计时原型设计
- 使用js制作一般网站首页图片轮播效果
- axure制作广告轮播效果
- jQuery图片切换,轮播效果(仿迅雷首页FLASH效果)
- [原型设计]Axure制作页面加载进度条效果
- <jQuery>首页图片切换/轮播
- Axure学习——制作海报轮播效果
- JS图片轮播切换效果实现
- 【axure手机原型】Axure实现iPhone推动切换效果
- 【axure手机原型】Axure实现iPhone推动切换效果
- 【axure手机原型】Axure实现iPhone推动切换效果
- Axure支付宝首页广告轮播
- 首页图片轮播
- 纯js制作图片轮播效果
- ViewPager实现APP首页图片轮播和自由切换
- axure实现图片轮播
- [原型设计]Axure制作图像的放大与缩小效果的四种方式
- 【C++ -> 容器初始化】结构体嵌套复杂结构初始化
- C++ STL 第六次实验
- 树状数组求逆序对
- 文章标题
- [原型设计]Axure制作首页轮播图片切换效果
- NOIP2017 大翻车记
- 平衡二叉树理解
- Okhttp解析(四)网络连接的建立
- [原型设计]Axure制作鼠标悬停图片切换效果
- JQuery全选,反选,批量删除
- Python零基础学习(3)
- c语言作业题11.11/12
- iOS11自定义弹窗不显示/HUD不消失的问题