400-800-9385
网站建设资讯详细

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

发表日期:2022-10-26 09:47:01   作者来源:林志平   浏览:326   标签:前端制作    
在网站的制作中,不可避免的会需要制作banner的轮播,大多数效果都是大同小异,一般体现在banner图上文字位置的变化,左右切换箭头的效果,或者是圆点修改的效果,例如下图所示的圆点做成带有动画效果的圆形:

效果

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

html1

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

html2


然后就是设置轮播的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
});
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/6567.html