新闻速览前端制作之修改swiper 的圆点为svg绘制的圆形2023/3/2 7:26:52

jimmy肖明

在的制作中，不可避免的会需要制作的轮播，大多数效果都是大同小异，一般体现在图上文字位置的变化，左右切换箭头的效果，或者是圆点修改的效果，例如下图所示的圆点做成带有动画效果的圆形：采集资源的最新消息可以到我们平台网站了解一下，也可以咨询客服人员进行详细的解答！https://cw.tyz18.cn/

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


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







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


-{:;: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:,修改的父元素时，自动初始化


});