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

在网站的制作中，不可避免的会需要制作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('<svg><circle cx="8" cy="8" r="6.5" stroke="#ff7500" stroke-width="2" fill="none"/></svg><span></span>');
            },
observer:true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents:true,//修改swiper的父元素时，自动初始化swiper
});