jQuery实现带进度条的轮播图

这篇文章主要为大家详细介绍了jQuery实现带进度条的轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

1.html模块

2.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;
}

3.jQuery模块

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++;
}
})
})
}

4.方法二

$(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);
});
}

*{
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);
}

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

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

来源：脚本之家

链接：https://www.jb51.net/article/195523.htm