带圆形进度条按钮的banner图
清除样式代码：
1 * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 2 body, li, ul { margin: 0; padding: 0; } 3 ul { list-style: none; } 4 img, a img { font-size: 0; border: 0; vertical-align: middle; }
html代码：
1 <head> 2 <meta charset="UTF-8"> 3 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 4 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 5 <title>banner</title> 6 <style> 7 .container {position:relative;padding:43px 0 0;width:100%;height:530px;} 8 .banner-img {position:absolute;left:0;top:0;width:100%;height:530px;} 9 .banner-img li {width:100%;height:530px;position:absolute;display:none;} 10 .banner-img li:first-child {display:block;} 11 .banner-img img {width:100%;height:100%;} 12 .container .banner-circle img {width:32px;height:32px;z-index:99;cursor:pointer;} 13 .container .banner-circle span {margin:0px 9px;color:#FFFFFF;font-size:12px;vertical-align:middle;} 14 .container .banner-circle {position:absolute;right:20.3%;bottom:47px;z-index:97;} 15 .container .banner-circle .outer {position:absolute;top:0;left:0;z-index:96;} 16 .container .banner-circle .circle-button {position:relative;width:34px;height:34px;cursor:pointer;} 17 .container .banner-circle .wrapper {position:absolute;top:-1px;width:17px;height:34px;font-size:0;overflow:hidden;} 18 .container .banner-circle .wrapper-l {left:-1px;} 19 .container .banner-circle .wrapper-r {right:1px;} 20 .banner-circle .circleProgress {width:34px;height:34px;position:absolute;top:0;border-top:3px solid #1a8cff;border-bottom:3px solid #1a8cff;transform:rotate(-180deg);} 21 .banner-circle .circle-button .left-circle {border-left:3px solid #1a8cff;border-radius:50%;clip:rect(0 17px 34px 0);animation-delay:2s;animation-iteration-count:1;} 22 .banner-circle .circle-button .right-circle {border-right:3px solid #1a8cff;border-radius:50%;left:-17px;clip:rect(0 34px 34px 17px);animation-iteration-count:1;animation-fill-mode:forwards;} 23 .load-animation {animation:circleLoad 2s linear infinite;} 24 @keyframes circleLoad { 25 0% {transform:rotate(-180deg);} 26 100% {transform:rotate(0deg);} 27 } 28 </style> 29 </head> 30 31 <body> 32 <div class="container"> 33 <ul class="banner-img"> 34 <li><a href="#"><img src="../images/lb1.png" alt=""></a></li> 35 <li><a href="#"><img src="../images/lb2.png" alt=""></a></li> 36 <li><a href="#"><img src="../images/lb3.png" alt=""></a></li> 37 <li><a href="#"><img src="../images/lb4.png" alt=""></a></li> 38 </ul> 39 <div class="banner-circle"> 40 <div class="outer arrow-left"> 41 <div class="circle-button"> 42 <div class="wrapper wrapper-l"> 43 <div class="circleProgress left-circle"></div> 44 </div> 45 <div class="wrapper wrapper-r"> 46 <div class="circleProgress right-circle"></div> 47 </div> 48 </div> 49 </div> 50 <img src="../images/left-page.png" alt="" class="arrow-left"> 51 <span class="arrow-mid">1/4</span> 52 <img src="../images/right-page.png" alt="" class="arrow-right"> 53 </div> 54 </div> 55 </body>
js代码：
1 // banner图 2 var index = 0; 3 var timer; 4 $(document).on("mouseenter", ".banner-circle img", function () { // 鼠标悬停时有一个白色透明背景的效果，这里用新的图片替换 5 let newSrc = $(this).attr("src").replace("page", "page-hover"); 6 $(this).attr("src", newSrc); 7 }).on("mouseleave", ".banner-circle img", function () { 8 let newSrc = $(this).attr("src").replace("page-hover", "page"); 9 $(this).attr("src", newSrc); 10 }).on("mouseenter", ".outer", function () { 11 let newSrc = $(this).next().attr("src").replace("page", "page-hover"); 12 $(this).next().attr("src", newSrc); 13 }).on("mouseleave", ".outer", function () { 14 let newSrc = $(this).next().attr("src").replace("page-hover", "page"); 15 $(this).next().attr("src", newSrc); 16 }).on("click", ".arrow-right", function () { // 点击向右切换按钮 17 bannerToRight(); 18 resetCircleLoading(); // 每次切换后让loading进度从头开始 19 }).on("click", ".arrow-left", function () { // 点击向左切换按钮 20 bannerToLeft(); 21 resetCircleLoading(); 22 }) 23 bannerTimeOut(); 24 // 向前切换 25 function bannerToLeft() { 26 index--; 27 if (index < 0) { 28 index = $(".banner-img li").length - 1; 29 } 30 $(".banner-img li").eq(index).fadeIn(1000).siblings().fadeOut(1000); 31 $(".arrow-mid").text(`${index+1}/${$(".banner-img li").length}`) // 修改按钮中间数字 32 clearInterval(timer); // 每次切换时清除之前的定时器 33 } 34 // 向后切换 35 function bannerToRight() { 36 index++; 37 if (index >= $('.banner-img li').length) { 38 index = 0; 39 } 40 $(".banner-img li").eq(index).fadeIn(1000).siblings().fadeOut(1000); 41 $(".arrow-mid").text(`${index+1}/${$(".banner-img li").length}`); 42 clearInterval(timer); 43 } 44 // 切换按钮loading效果 45 function bannerTimeOut() { 46 if (timer) { 47 clearInterval(timer); 48 } 49 $(".circle-button").find(".circleProgress").addClass("load-animation") 50 timer = setInterval(() => { 51 $(".circle-button").find(".circleProgress").removeClass("load-animation") 52 bannerToRight() // 定时器时间到了后自动切换到下一张 53 bannerTimeOut() // 切换完成后再次调用loading定时器(即函数自己) 54 }, 4000); 55 } 56 // 重置loading效果 57 function resetCircleLoading() { 58 $(".circle-button").find(".circleProgress").removeClass("load-animation") 59 setTimeout(() => { 60 bannerTimeOut() 61 }, 100); 62 }
效果如下：
🍓 害，我是一个颜值前端。
✧*｡٩(ˊᗜˋ*)و✧*｡
