好资源导航 » 文章资讯 » jQuery实现带进度条的轮播图

jQuery实现带进度条的轮播图

2023-07-16 19:28:03 83

本文实例为大家分享了jQuery实现带进度条轮播图的具体代码，供大家参考，具体内容如下

1.html模块

2.css模块


*{
margin:0;
padding:0;
list-style:none;
}
.banner{
width:100%;
height:600px;
position:relative;
}
ulli{
width:100%;
height:600px;
position:absolute;
top:0;
left:0;
overflow:hidden;
}
ulliimg{
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%;
}
.barp{
width:0px;
height:3px;
background-color:green;
}

3.jQuery模块



vari=0;//定义当前索引
imgChange();//初始化调用
//定时切换
setInterval("imgChange()",6000);
//图片轮播的函数
functionimgChange(){
//进度条完成后显示下一张背景
$("ulli").eq(i).fadeIn(100).siblings().fadeOut(100);
//初始化文字图片---设置到外部
$("ulli").eq(i).find("img").css("left","-100%");
//初始化进度条
$("ulli").eq(i).find("p").css("width","0px");
//设置文字图片从左进入的动画
$("ulli").eq(i).find("img").animate({"left":"0px"},500,function(){
//设置进度条动画
$("ulli").eq(i).find("p").animate({"width":"100%"},5000,function(){
$("ulli").eq(i).find("img").animate({left:"100%"},400);
//改变当前索引，当索引为最后一个则设为0，否则就加一
if(i>=$("ulli").length-1){
i=0
}else{
i++;
}
})
})
}

4.方法二





带进度条的轮播图


$(function(){
//初始环境
vari=0,m;
tin(i);
//定时器
m=setInterval(function(){
if(i>=2){
i=0;
}else{
i++;
}
tin(i);
},5000);
})
//动画效果
vartin=function(i){
$(".contli").eq(i).find("img").css("left","-100%");
$(".barspan").css("width","0%");
$(".contli").eq(i).fadeIn(100).siblings().fadeOut(100);
$(".contli").eq(i).find("img").animate({left:"0%"},1000);
$(".barspan").animate({width:"100%"},4500,function(){
$(".contli").eq(i).find("img").animate({left:"100%"},400);
});
}


*{
margin:0;
padding:0;
list-style:none;
}
.box{
width:100%;
height:630px;
position:relative;
}
.cont{
width:100%;
height:630px;
position:relative;
overflow:hidden;
}
.contli{
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;
}
.barspan{
width:0px;
display:block;
height:80%;
background-color:green;
border-radius:50px;
}
.contliimg{
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);
}

精彩专题分享：jQuery图片轮播JavaScript图片轮播Bootstrap图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

jQuery实现带进度条的轮播图

热门推荐

随机推荐