AXURE 轮播图作业来啦~

果然是熟能生巧,这个动效的完成时间比上次快了好多,各种基础组件用的也比较熟练了,嘻嘻☺️
先看效果图:
在这里插入图片描述
实现要点:
1、每个状态点跟随每张banner图的变化而变化,图片从左到右首尾相接左滑轮播;
2、鼠标悬停时,轮播动画停止,左右箭头显示;
3、点击箭头,当前展示banner可切换到上一张或下一张,鼠标移出区域后,动画继续。

实现步骤:
第一步
当然是上次的步骤重复啦,先拉一个动态面板,咔咔来四个状态🙃,再来四个小方,
在这里插入图片描述
小方的初始背景为灰色,然后在PROPERTIES中设置选中背景色为任意闪亮的✨の颜色
在这里插入图片描述
给轮播动态面板设置onload事件:循环动画&小方初始状态
在这里插入图片描述
为了让小方颜色跟banner一起动起来,即当轮播面板的状态改变时,四个小方也要同时切换不同的值:
在这里插入图片描述
到这一步,就实现了基础的banner动效。
第二步
鼠标悬停效果就要加鼠标事件了:移进轮播面板,动画停止,移出,动画继续
OnMouseEnter
在这里插入图片描述
然后拖入俩箭头,并分别添加点击事件
在这里插入图片描述
箭头的初始状态设为隐藏,当鼠标移入是显示,移出时隐藏
若移入移出监听事件加在轮播面板上,当鼠标移上箭头时,会出现箭头先消失后显示的bug,所以,将当前的所有组件全部选中,转换为动态面板后,将监听事件加在这个新面板上
在这里插入图片描述
此时,又出现了个奇怪的事情,这个新面板上的OnMouseEnter事件好像没有生效,要疯(╯‵□′)╯︵┻━┻
找了好久也不知道为啥,然后,我把绑在轮播面板上的OnMouseEnter事件转到了这个新面板上,然后就OK啦
在这里插入图片描述
是因为同一面板下的所有层级,单个事件只能绑定一次?这个问题我再多实践看看吧,留个思考题🤔

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值