带圆形进度条按钮的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 }

效果如下：

posted on 2019-12-17 16:24 41酱的小草莓阅读(347) 评论(0) 编辑收藏举报

刷新页面返回顶部

41酱的小草莓

导航

公告

带圆形进度条按钮的banner图