Axure教程:广告图片自动轮播+点击切换

2018-09-1717:14:28原型设计Comments4,376 views字数 643阅读模式

看一下我们最终想要的效果:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4976.html

Axure教程:广告图片自动轮播+点击切换文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4976.html

一、制作自动轮播

1、选中图片右键转换为动态面板,同时在动态面板中添加第二张和第三张广告图。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4976.html

如下图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4976.html

Axure教程:广告图片自动轮播+点击切换文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4976.html

Axure教程:广告图片自动轮播+点击切换文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4976.html

2、点击页面空白处,设置页面载入时事件,选择 设置动态面板 效果,选择banner图片动态面板,把状态设置为 Next , 勾选 向后循环 和 循环间隔 ,同时设置好进入动画和退出动画向左滑动。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4976.html

如下图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4976.html

Axure教程:广告图片自动轮播+点击切换文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4976.html

3、重复以上两步操作把焦点图完成,其中注意两点,一是进入动画和退出动画设置为 逐渐,二是每一帧设置好对应的焦点样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4976.html

Axure教程:广告图片自动轮播+点击切换文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4976.html

到这里可以预览一下效果,会发现简单两步,我们就实现了广告图轮播了,嘻嘻。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4976.html

接下来我们进入第二大步,增加点击切换功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4976.html

二、增加点击切换

给每一帧的焦点样式增加鼠标单机时事件,点击时触发2个事件:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4976.html

(1)设置切换面板状态,需同时设置好 焦点样式 和 banner图片 对应的面板状态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4976.html

例如:选择第一帧的元素,则设置 焦点样式 和 banner图片 的面板状态切换到第一帧和第一张,以此类推,把第二帧和第三帧设置好。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4976.html

Axure教程:广告图片自动轮播+点击切换文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4976.html

(2)设置单击后自动轮播,需同时设置好 焦点样式 和 banner图片 对应的面板状态自动轮。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4976.html

方法和第一步基本雷同,例如选择第一帧的元素,则设置 焦点样式 和 banner图片 的面板状态设置为Next,向后循环,设置项如下图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4976.html

Axure教程:广告图片自动轮播+点击切换文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4976.html

用此方法重复把每一帧的焦点样式制作好,我们的banner图自动轮播+点击切换轮播,就完成了,是不是很简单。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4976.html

原型下载地址:https://pan.baidu.com/s/1QgqvuYSrvtfaLvyIHOsEdQ文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4976.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/4976.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定