AXURE 轮播图作业来啦~

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

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

<think>好的,用户想了解如何在Axure中设置轮播图实现持续循环播放。我需要根据提供的引用内容来整理步骤。首先,引用中提到了态面板的使用,比如引用[2]和引用[3]都提到态面板是关键组件。然后,引用[4]详细说明了如何通过多个态面板和交互事件来实现态轮播,包括设置不同状态的面板,调整位置和大小,以及添加点击事件。 用户需要的是持续循环播放,所以可能需要自切换而不是手点击。不过提供的引用里提到的是点击事件和拖事件,但自循环可能需要设置定时触发。不过引用中没有直接提到自循环的方法,可能需要结合载入时事件和循环作。 根据引用[2],载入时交互可以用来初始化轮播,比如设置初始状态。引用[4]提到在载入时设置轮播位置,但需要添加循环逻辑。可能需要使用“等待”作后触发下一次切换,形成循环。 另外,引用[4]提到态面板需要固定大小,避免中心点变化,这点需要注意。可能需要将图片放在态面板内,调整面板的位置而不是图片本身,以保持布局稳定。 总结步骤应该是:创建态面板多个状态,设置载入时事件触发切换,在切换后等待一段时间再次触发,形成循环。同时,需要处理面板的状态切换和位置移,确保平滑过渡。可能还需要使用变量来跟踪当前状态,实现无限循环的果。需要检查引用中的示例,是否有类似的方法,或者需要用户自行扩展。可能需要结合多个引用中的方法,比如态面板的状态切换和定时交互来实现自循环。</think>在Axure中实现轮播图持续循环播放,需要通过态面板的交互功能和自触发机制实现。以下是详细步骤: ### 一、基础结构搭建 1. **创建态面板** - 添加态面板并命名为「轮播容器」 - 创建3个面板状态(State1/State2/State3),每个状态放置不同图片 - 设置统一尺寸如$600×400px$,确保所有图片尺寸一致[^4] 2. **布局定位** - 将态面板放置在画布中央 - 在外层添加固定尺寸的遮罩层,超出部分隐藏 ```axure (伪代码示意) 态面板"轮播容器"属性: - 尺寸:1800×400px(3张图片总宽度) - 状态数:3个 - 每个状态尺寸:600×400px ``` ### 二、自循环实现 3. **载入时触发** - 选中态面板→添加「载入时」事件 - 添加「设置面板状态」作:选择下一状态,设置循环间隔$3000ms$(3秒) - 勾选「向前循环」和「自循环」选项[^2] 4. **态切换果** - 添加「推/拉果,设置$500ms$过渡时间 - 使用「向左滑」或「淡入淡出」画类型[^3] ### 三、无限循环优化 5. **克隆面板技术** - 在首尾各添加一个克隆面板(如State3克隆到开头,State1克隆到结尾) - 通过「设置面板位置」实现无缝跳转 - 数学公式:$总位移量 = 图片数量 × 单图宽度$ 6. **变量控制(进阶)** - 创建全局变量CurrentIndex - 每次切换时更新变量:$CurrentIndex = (CurrentIndex \% 3) + 1$ - 通过条件判断实现特殊位置的复位操作 ### 四、测试与调试 7. **预览验证** - 按F5预览原型 - 检查是否实现以下果: - 每3秒自切换 - 循环次数超过3次仍正常运作 - 窗口缩放时保持定位
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值