域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)帶進(jìn)度條的輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)帶進(jìn)度條輪播圖的具體代碼，供大家參考，具體內(nèi)容如下
1.html模塊
<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模塊
<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模塊
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var i=0;//定義當(dāng)前索引
imgChange();//初始化調(diào)用
//定時(shí)切換
setInterval("imgChange()",6000);
//圖片輪播的函數(shù)
function imgChange(){
//進(jìn)度條完成后顯示下一張背景
$("ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
//初始化文字圖片---設(shè)置到外部
$("ul li").eq(i).find("img").css("left","-100%");
//初始化進(jìn)度條
$("ul li").eq(i).find("p").css("width","0px");
//設(shè)置文字圖片從左進(jìn)入的動(dòng)畫
$("ul li").eq(i).find("img").animate({"left":"0px"},500,function(){
//設(shè)置進(jìn)度條動(dòng)畫
$("ul li").eq(i).find("p").animate({"width":"100%"},5000,function(){
$("ul li").eq(i).find("img").animate({left:"100%"},400);
//改變當(dāng)前索引，當(dāng)索引為最后一個(gè)則設(shè)為0，否則就加一
if(i>=$("ul li").length-1){
i=0
}else{
i++;
}
})
})
}
</script>
4.方法二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>帶進(jìn)度條的輪播圖</title>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
// 初始環(huán)境
var i=0,m;
tin(i);
// 定時(shí)器
m=setInterval(function () {
if (i>=2) {
i=0;
}else{
i++;
}
tin(i);
},5000);
})
// 動(dòng)畫效果
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>
<!--進(jìn)度條-->
<div class="bar">
<span></span>
</div>
</div>
</div>
</body>
</html>
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
來源：腳本之家
鏈接：https://www.jb51.net/article/195523.htm
申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！
