动态面板:自动图片切换

本文介绍如何使用动态面板在前端实现一个自动切换的图片轮播效果,包括设置多个状态来放置图片,设定圆点分页标签的选中样式,以及配置图片循环播放的交互和动画效果。
摘要由CSDN通过智能技术生成

案例描述:
固定区域循环播放一组图片(幻灯片效果),圆形分页标签随着播放不同的图片,而对应改变样式。

思路分析:
①利用动态面板可添加多个状态的特性,创建5个状态;
②将5张需要展示的图片放到各个状态里面;
③将圆点分页标签做成只能唯一被选中的效果,并设置第一个圆点默认被选中;
④页面打开后,开启图片循环播放的效果;
⑤每次切换到新的图片时,根据状态名称选中圆点分页标签,呈现蓝色效果
注意:第1张图片的尺寸大小决定后面图片的大小(即与第1张保持一致)
1.把动态面板拖入页面,命名为SlidePanel
2.双击动态面板
在这里插入图片描述
3.进入状态“State1”,添加一张图片到画布左上顶点的位置(位置可自定)
在这里插入图片描述
4.参考上一步,将剩余四张图片分别放入到状态“State1”~“State5”中;
在这里插入图片描述
5.在动态面板区域外拖入一个圆形,在元件属性中为其设置【选中】的样式,{设置选项组名称}为“Tag”,并调整为合适的大小;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值