[原型设计]Axure制作首页轮播图片切换效果
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制作首页轮播图片切换效果相关推荐
- UI-网站首页轮播图、易拉宝、发布在微信公众号的宣传海报的图片设计信息
UI交互设计 一."新建" 常见的颜色模式: 颜色模式,是将某种颜色表现为数字形式的模型,或者说是一种记录图像颜色的方式.分为:RGB模式.CMYK模式.HSB模式.Lab颜色模式 ...
- 实战SSM_O2O商铺_40【前端展示】首页轮播图和一级商铺View层的实现
文章目录 概述 index.html index.js index.css Controller 调测 修复问题 头条图片展示修复 一级类别商铺图片展示修复 Github地址 概述 在完成了后端 实战 ...
- 六十六、实现Vue项目首页轮播图（vue-awesome-swiper）
2020/10/23. 周五.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/22 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共 ...
- （转）淘淘商城系列——首页轮播图展示
http://blog.csdn.net/yerenyuan_pku/article/details/72848306 上文我们一起学习了内容管理,由于时间太紧了,好多功能都没实现,在此对读者说声抱歉 ...
- 微服务项目实战技术点汇总：“尚硅谷的谷粒在线教育”七、redis数据库缓存页面数据、使用NUXT框架搭建前台系统环境、前台系统页面、首页轮播图（banner数据显示）、首页热门课程，名师推荐
文章目录 一.NUXT前台环境搭建 1.如何学习NUXT 2.下载安装使用NUXT入门模板starter-template 3.机制 二.编写静态页面 1.设置布局(首尾固定,中间用nuxt引用组件) ...
- 【VIP视频网站项目二】搭建爱奇艺优酷腾讯视频官网首页轮播图效果及实现原理分析
这个是实现的效果,基本上轮播效果和主流网站的一致,但是我也在上面优化了一些效果, 可以在线预览效果:https://vip.52tech.tech/ 目前项目代码已经全部开源:项目地址:https:/ ...
- 基于Redis优化首页轮播图查询
@ApiOperation(value = "获取首页轮播图列表", notes = "获取首页轮播图列表", httpMethod = "GET&q ...
- 用CSS3制作令人印象深刻的产品展示图片切换效果
用CSS3制作令人印象深刻的产品展示图片切换效果 产品页面是在您的网站上的任何页面展示产品.它必须描述产品的特点,给点截图展示.当然,这是你让访问者对你的产品感兴趣的地方,但它越来越难以抓住他们的注意 ...
- html+css+jquery,html+css+js(+JQuery)制作扑克牌图片切换效果
先把静态页面写出来: index.html jquery制作扑克牌图片切换效果 此时的效果是这样的: 分析: 背景颜色 图片的位置 图片的边框.圆角以及阴影 让图片动起来 index.css代码: * ...
最新文章
- javascript 异步实现方案
- python中进制_python中进制的算法
- ejb jsf jpa_完整的WebApplication JSF EJB JPA JAAS –第1部分
- Centos7 防火墙开启端口
- 一个关于 客户端非法取消正在进行的数据提交操作 的问题 的讨论
- Sonar问题及解决方案汇总
- mysql拷贝目录迁移方案_mysql 直接拷贝data 目录下文件 进行数据库迁移时遇到的一些问题？？...
- tp5在apache下能访问，但放到nginx下报404
- less，sass，stylus配置和应用教程及三者比较
- Java的日期格式化常用方法
- 制作简单启动型 U 盘_附制作工具下载
- 华为云服务器使用心得
- Spark3 读写 S3 Parquet, Hive, Hudi
- 可解释机器学习（Explainable/ Interpretable Machine Learning）的原理和应用（李宏毅视频课笔记）
- 想知道视频水印怎么去？推荐几个去视频水印的方法
- 01-认识产品经理：什么是合格的产品经理？其分类？岗位职责？能力素质？职业发展？
- 命令行 笔记本键盘禁用_如何在 Ubuntu 20.04 上禁用坞站（dock） | Linux 中国
- 抖音-uid转sec_uid
- 大家在人生低谷时有多惨，怎么熬过来的(二)
- 中国墨子号卫星首次实现1200公里量子纠缠，震惊国外专家