本文实例为大家分享了jQuery实现带进度条轮播图的具体代码，供大家参考，具体内容如下
1.html模块
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<div class="banner"> <ul> <li style="background: url(img/bg1.jpg) center;"> <img src="img/con1.png" /> <div class="nav"></div> <div class="bar"> <p></p> </div> </li> <li style="background: url(img/bg2.jpg) center;"> <img src="img/con2.png" /> <div class="nav"></div> <div class="bar"> <p></p> </div> </li> <li style="background: url(img/bg3.jpg) center;"> <img src="img/con3.png" /> <div class="nav"></div> <div class="bar"> <p></p> </div> </li> </ul></div> |
2.css模块
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } .banner{ width: 100%; height: 600px; position: relative; } ul li{ width: 100%; height: 600px; position: absolute; top: 0; left: 0; overflow:hidden; } ul li img{ width: 100%; height: 600px; position: absolute; left: -100%; } .nav{ width: 100%; height: 70px; background: rgba(255,255,255,0.3); position: absolute; bottom: 0; } .bar{ width: 80%; height: 3px; background-color: #999; position: absolute; bottom: 0; left: 10%; } .bar p{ width: 0px; height: 3px; background-color: green; }</style> |
3.jQuery模块
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> var i=0;//定义当前索引 imgChange();//初始化调用 //定时切换 setInterval("imgChange()",6000); //图片轮播的函数 function imgChange(){ //进度条完成后显示下一张背景 $("ul li").eq(i).fadeIn(100).siblings().fadeOut(100); //初始化文字图片---设置到外部 $("ul li").eq(i).find("img").css("left","-100%"); //初始化进度条 $("ul li").eq(i).find("p").css("width","0px"); //设置文字图片从左进入的动画 $("ul li").eq(i).find("img").animate({"left":"0px"},500,function(){ //设置进度条动画 $("ul li").eq(i).find("p").animate({"width":"100%"},5000,function(){ $("ul li").eq(i).find("img").animate({left:"100%"},400); //改变当前索引，当索引为最后一个则设为0，否则就加一 if(i>=$("ul li").length-1){ i=0 }else{ i++; } }) }) }</script> |
4.方法二
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>带进度条的轮播图</title> <script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { // 初始环境 var i=0,m; tin(i); // 定时器 m=setInterval(function () { if (i>=2) { i=0; }else{ i++; } tin(i); },5000); }) // 动画效果 var tin = function (i) { $(".cont li").eq(i).find("img").css("left","-100%"); $(".bar span").css("width","0%"); $(".cont li").eq(i).fadeIn(100).siblings().fadeOut(100); $(".cont li").eq(i).find("img").animate({left:"0%"},1000); $(".bar span").animate({width:"100%"},4500,function () { $(".cont li").eq(i).find("img").animate({left:"100%"},400); }); } </script> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } .box{ width: 100%; height: 630px; position: relative; } .cont{ width: 100%; height: 630px; position: relative; overflow: hidden; } .cont li{ width: 100%; height: 630px; position: absolute; top: 0; left: 0; } .bar{ width: 70%; height: 3px; position: absolute; bottom: 0px; left: 15%; background-color: white; border-radius: 50px; } .bar span{ width: 0px; display: block; height: 80%; background-color: green; border-radius: 50px; } .cont li img{ width: 100%; height: 630px; position: absolute; left: -100%; top: 0; } .con1{ background: url(img/bg1.jpg) center; } .con2{ background: url(img/bg2.jpg) center; } .con3{ background: url(img/bg3.jpg) center; } .pav{ width: 100%; height: 70px; position: absolute; bottom: 0px; background-color: rgba(255,255,255,0.3); } </style> </head> <body> <div id="main"> <div id="box" class="box"> <!--图片--> <ul class="cont"> <li class="con1"><img src="img/con1.png"/></li> <li class="con2"><img src="img/con2.png"/></li> <li class="con3"><img src="img/con3.png"/></li> </ul> <div class="pav"></div> <!--进度条--> <div class="bar"> <span></span> </div> </div> </div> </body></html> |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/m0_46690660/article/details/108154858
