在網(wǎng)站的制作中，不可避免的會(huì)需要制作banner的輪播，大多數(shù)效果都是大同小異，一般體現(xiàn)在banner圖上文字位置的變化，左右切換箭頭的效果，或者是圓點(diǎn)修改的效果，例如下圖所示的圓點(diǎn)做成帶有動(dòng)畫(huà)效果的圓形：

首先，需要明白怎么用svg繪制一個(gè)圓形，用svg繪制圓形可以通過(guò)設(shè)置circle來(lái)實(shí)現(xiàn)，需要設(shè)置確定的圓心和半徑，設(shè)置圓心需要的是cx和cy，設(shè)置半徑需要的是r，而fill是填充圓的顏色，stroke 屬性是用來(lái)描邊的，如下所示：

現(xiàn)在可以先開(kāi)始構(gòu)建html的內(nèi)容，例如是每一屏的內(nèi)容和設(shè)置默認(rèn)的圓點(diǎn)，如下所示：
 

然后就是設(shè)置輪播的css樣式，如以往的一致，需要注意的是設(shè)置會(huì)轉(zhuǎn)動(dòng)的圓環(huán)的樣式，如下所示:
.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); }
然后設(shè)置關(guān)于swiper js，需要注意的是生成分頁(yè)器時(shí)執(zhí)行的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自己或子元素時(shí)，自動(dòng)初始化swiper
            observeParents:true,//修改swiper的父元素時(shí)，自動(dòng)初始化swiper
});