利用jQuery实现一个带进度条的轮播图

　　介绍

利用jQuery实现一个带进度条的轮播图?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

1。html模块

& lt; div类=癰anner"比; 　　& lt; ul> 　　& lt;李比; 　　https://www.yisu.com/zixun/& lt; img src=" img/con1.png "/> 　　

　　%20

　　李　　<李> 　　　　%20

%20

　　李　　　　

%20%20

%202。css模块

%20%20&%20lt;风格类型=拔谋?css"比; 　　*%20{ 　　保证金:0; 　　填充:0; 　　list-style:没有; 　　} 　　.banner%20{ 　　宽度:100%; 　　身高:600%20px; 　　位置:相对; 　　} 　　ul李{ 　　宽度:100%; 　　身高:600%20px; 　　位置:绝对的; 　　上图:0; 　　左:0; 　　溢出:隐藏; 　　} 　　ul李img%20{ 　　宽度:100%; 　　身高:600%20px; 　　位置:绝对的; 　　左:-100%; 　　} 　　.nav%20{ 　　宽度:100%; 　　身高:70%20px; 　　背景:rgba%20(255255255,%200.3); 　　位置:绝对的; 　　底部:0; 　　} 　　.%20bar%20{ 　　宽度:80%; 　　高度:3%20px; 　　background%20-%20color:%20#%20999; 　　位置:绝对的; 　　底部:0; 　　左:10%; 　　} 　　.%20bar%20p%20{ 　　宽度:0%20px; 　　高度:3%20px; 　　背景颜色:绿色; 　　} 　　&%20lt;/style>%20%20

%203。jQuery模块

%20%20&%20lt;脚本https://www.yisu.com/zixun/src="%20js/jquery-3.5.1.js%20"%20type="%20text/javascript%20"%20charset="%20utf%20-%208%20">%20 　　<脚本type="%20text/javascript”> 　　var=0;//定义当前索引　　imgChange();//初始化调用//定时切换　　setInterval%20(“imgChange%20()%20",%206000);//图片轮播的函数　　函数imgChange%20()%20{//进度条完成后显示下一张背景　　$%20(“ul”)%20.eq%20(i)%20.fadeIn%20(100)%20.siblings%20()%20.fadeOut%20(100);//初始化文字图片——设置到外部　　$%20(“ul”)%20.eq%20(i);%20(img)%20.%20css(“左”,“-100%”);//初始化进度条　　$%20(“ul”)%20.eq%20(i);%20(p)%20.%20css(“宽度”,“0%20px”);//设置文字图片从左进入的动画　　$%20(“ul”)%20.eq%20(i);%20(img)%20.animate({“左”:“0%20px”},%20500年,函数(){//设置进度条动画　　$%20(“ul”)%20.eq%20(i);%20(p)%20.animate({“宽度”:“100%”},5000年,函数(){ 　　$%20(“ul”)%20.eq%20(i);%20(img)%20.animate({左:“100%”},400);//改变当前索引,当索引为最后一个则设为0,否则就加一　　如果(我>=$%20(“ul”)%20.length-1)%20{ 　　我=0 　　其他}{ 　　我+%20+; 　　} 　　}）　　}）　　} 　　%20%20

%204。方法二

%20%20&%20lt;%20!DOCTYPE%20html> 　　&%20lt;%20html> 　　&%20lt;%20head> 　　&%20lt;元charset=癠TF-8"祝辞　　&%20lt;%20title>带进度条的轮播图&%20lt;/title> 　　&%20lt;脚本src=https://www.yisu.com/zixun/"%20js/jquery-3.5.1.js%20"%20type="%20text/javascript%20"%20charset="%20utf%20-%208%20">%20 　　<脚本type="%20text/javascript”> 　　$(函数(){//初始环境　　var%20i=0,%20m; 　　锡(我);//定时器　　m=setInterval(函数(){ 　　如果(>=2){ 　　我=0; 　　其他}{ 　　我+%20+; 　　} 　　锡(我); 　　},5000); 　　}）//动画效果　　var锡=function%20(i)%20{ 　　$("。跟李”).eq%20(i);%20(img)%20.%20css(“左”,“-100%”); 　　$("。酒吧跨度”).%20css(“宽度”,“0%”); 　　$("。跟李”).eq%20(i)%20.fadeIn%20(100)%20.siblings%20()%20.fadeOut%20(100); 　　$("。跟李”).eq%20(i);%20(img)%20.animate({左:“0%”},1000); 　　$("。酒吧跨度”)。动画(4500年{宽度:“100%”},函数(){ 　　$("。跟李”).eq%20(i);%20(img)%20.animate({左:“100%”},400); 　　}); 　　}>%20 　　*%20{ 　　保证金:0; 　　填充:0; 　　list-style:没有; 　　} 　　.box%20{ 　　宽度:100%; 　　身高:630%20px; 　　位置:相对; 　　} 　　.cont%20{ 　　宽度:100%; 　　身高:630%20px; 　　位置:相对; 　　溢出:隐藏; 　　} 　　李.cont%20{ 　　宽度:100%; 　　身高:630%20px; 　　位置:绝对的; 　　上图:0; 　　左:0; 　　} 　　.%20bar%20{ 　　宽度:70%; 　　高度:3%20px; 　　位置:绝对的; 　　底部:0%20px; 　　左:15%; 　　背景颜色:白色; 　　border%20-%20radius:%2050%20px; 　　} 　　.%20bar跨度{ 　　宽度:0%20px; 　　显示:块; 　　高度:80%; 　　背景颜色:绿色; 　　border%20-%20radius:%2050%20px; 　　} 　　李.cont%20img%20{ 　　宽度:100%; 　　身高:630%20px; 　　位置:绝对的; 　　左:-100%; 　　上图:0; 　　} 　　.con1%20{ 　　背景:url%20(img/bg1.jpg)中心; 　　} 　　.con2 { 　　背景:url (img/bg2.jpg)中心; 　　} 　　.con3 { 　　背景:url (img/bg3.jpg)中心; 　　} 　　.pav { 　　宽度:100%; 　　身高:70 px; 　　位置:绝对的; 　　底部:0 px; 　　background - color: rgba (255255255, 0.3); 　　}>