带有进度条的轮播图jQuery实现

最新推荐文章于 2024-04-04 11:16:38 发布

清砾

最新推荐文章于 2024-04-04 11:16:38 发布

阅读量1k

点赞数

分类专栏：技术小妙招文章标签： html jquery

本文链接：https://blog.csdn.net/m0_46690660/article/details/108154858

版权

技术小妙招专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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;//定义当前索引
			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.方法二

<!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>

清砾

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
带有进度条的轮播图jQuery实现

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> </di
复制链接

扫一扫