在网站的制作中，不可避免的会需要制作banner的轮播，大多数效果都是大同小异，一般体现在banner图上文字位置的变化，左右切换箭头的效果，或者是圆点修改的效果，例如下图所示的圆点做成带有动画效果的圆形：

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

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

然后就是设置轮播的css样式，如以往的一致，需要注意的是设置会转动的圆环的样式，如下所示:.banner .swiper-pagination{ position: absolute; top: 50%; left: 7%; bottom: auto; transform: translateY(-50%); box-sizing: border-box; font-size: 0; width: auto; }.banner .swiper-pagination-bullet{ position: relative; margin: 0 auto!important; cursor: pointer; background: none; width: auto; height: auto; opacity: 1; display: block; padding: 14px 0; }.banner .swiper-pagination-bullet svg { display: block; width: 16px; height: 16px; position: relative; z-index: 5; }.banner .swiper-pagination-bullet svg circle{ stroke-dasharray: 50; stroke-dashoffset: 50; transition: stroke-dashoffset 0.6s ease-out; -webkit-transition: stroke-dashoffset 0.6s ease-out; -moz-transition: stroke-dashoffset 0.6s ease-out; -o-transition: stroke-dashoffset 0.6s ease-out; -ms-transition: stroke-dashoffset 0.6s ease-out; }.banner .swiper-pagination-bullet span{ position: absolute; z-index: 4; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border: 2px solid transparent; border-radius: 50%; box-sizing: border-box; transition: border-color 0.3s ease-out; -webkit-transition: border-color 0.3s ease-out; -moz-transition: border-color 0.3s ease-out; -o-transition: border-color 0.3s ease-out; -ms-transition: border-color 0.3s ease-out; }.banner .swiper-pagination-bullet span:after { content: ; width: 10px; height: 10px; border-radius: 50%; background-color: #FFFFFF; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }.banner .swiper-pagination-bullet-active span:after { opacity: 0; }.banner .swiper-pagination-bullet-active svg circle { stroke-dashoffset: 0; transition: stroke-dashoffset 5s ease-out; -webkit-transition: stroke-dashoffset 5s ease-out; -moz-transition: stroke-dashoffset 5s ease-out; -o-transition: stroke-dashoffset 5s ease-out; -ms-transition: stroke-dashoffset 5s ease-out; }.banner .swiper-pagination-bullet-active span { border-color: rgba(255, 255, 255); }然后设置关于swiper js，需要注意的是生成分页器时执行的onPaginationRendered，如下所示：var swiper = new Swiper(.banner, {pagination: .carouselImg .swiper-pagination,paginationClickable: true,nextButton: .carouselImg .swiper-button-next, prevButton: .carouselImg .swiper-button-prev,speed: 1000,autoplay: 4500, autoplayDisableOnInteraction: false,onPaginationRendered:function(swiper, paginationContainer){$(.carouselImg .swiper-pagination-bullet).append(svgcircle cx=8 cy=8 r=6.5 stroke=#ff7500 stroke-width=2 fill=none//svgspan/span);},observer:true,//修改swiper自己或子元素时，自动初始化swiperobserveParents:true,//修改swiper的父元素时，自动初始化swiper});

前端制作之修改swiper 的圆点为svg绘制的圆形_成都网站搭建   https://cdnanqi.cn/wangzhanzhizuo/11124.html