物流大超市

 找回密码
 注册
查看: 343|回复: 0
打印 上一主题 下一主题

看一看前端制作之修改swiper 的圆点为svg绘制的圆形

[复制链接]
跳转到指定楼层
1#
kaixun 发表于 2023-2-23 13:23:42 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

在的制作中,不可避免的会需要制作的轮播,大多数效果都是大同小异,一般体现在图上文字位置的变化,左右切换箭头的效果,或者是圆点修改的效果,例如下图所示的圆点做成带有动画效果的圆形:美工教程的具体问题可以到我们网站了解一下,也有业内领域专业的客服为您解答问题,为成功合作打下一个良好的开端!


首先,需要明白怎么用绘制一个圆形,用绘制圆形可以通过设置来现,需要设置确定的圆心和半径,设置圆心需要的是和,设置半径需要的是,而是填充圆的颜色,属性是用来描边的,如下所示:


现在可以先开始构建的内容,例如是每一屏的内容和设置默认的圆点,如下所示:







然后就是设置轮播的样式,如以往的一致,需要注意的是设置会转动的圆环的样式,如下所示:


-{:;:50%;:7%;:;:Y(-50%);-:-;-:0;:;}


--{:;:0!;:;:;:;:;:1;:;:0;}


--{:;:;:;:;-:5;}


--{-:50;-:50;:-;--:-;--:-;--:-;--:-;}


--{:;-:4;:50%;:50%;-50%,-50%);:;:;:2;-:50%;-:-;:-;--:-;--:-;--:-;--:-;}


--:{:;:;:;-:50%;-:#FFFFFF;:;:0;:0;:0;:0;:;}


---:{:0;}


---{-:0;:-5-;--:-5-;--:-5-;--:-5-;--:-5-;}


---{-5,5,5);}


然后设置关于,需要注意的是生成分页器时执行的PR,如下所示:


=S('',{


:'I-',


C:,


B:'I--',


B:'I--',


:00,


:4500,


DOI:,


PR,C){


$('I--')('=8=8=65=#7500-=2=');


},


:,修改自己或子元素时,自动初始化


P:,修改的父元素时,自动初始化


});
您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|物流大超市 ( 桂ICP备2025065447号 )

GMT+8, 2026-1-21 06:03 , Processed in 0.039424 second(s), 15 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表