axure轮播图怎么设置循环轮播_Axure教程:广告图片自动轮播+点击切换

广告图轮播在日常的原型设计中是最常见的了,今天和大家分享如何制作自动轮播+手工点击切换,底部有已制作好的原型文件下载,废话不多说,咋们现在就动手实现。

首先看一下我们最终想要的效果

一、制作自动轮播

1、选中图片右键转换为动态面板,同时在动态面板中添加第二张和第三张广告图。如下图

2、点击页面空白处,设置页面载入时事件,选择 设置动态面板效果,选择banner图片动态面板,把状态设置为 Next , 勾选 向后循环 和 循环间隔 ,同时设置好进入动画和退出动画向左滑动。如下图

3、重复以上两步操作把焦点图完成,其中注意两点,一是进入动画和退出动画设置为 逐渐,二是每一帧设置好对应的焦点样式。

到这里可以预览一下效果,会发现简单两步,我们就实现了广告图轮播了,嘻嘻。

接下来我们进入第二大步,增加点击切换功能

二、增加点击切换

给每一帧的焦点样式增加鼠标单机时事件,点击时触发2个事件:

(1)设置切换面板状态,需同时设置好 焦点样式和 banner图片对应的面板状态。

例如选择第一帧的元素,则设置 焦点样式和 banner图片的面板状态切换到第一帧和第一张,

以此类推,把第二帧和第三帧设置好。

(2)设置单击后自动轮播,需同时设置好 焦点样式和 banner图片对应的面板状态自动轮。

方法和第一步基本雷同,例如选择第一帧的元素,则设置 焦点样式和 banner图片的面板状

态设置为Next,向后循环,设置项如下图:

用此方法重复把每一帧的焦点样式制作好,我们的banner图自动轮播+点击切换轮播,就完成了,是不是很简单。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值