（CSS+JS+Jquery）自动轮播图

最新推荐文章于 2023-12-20 17:27:12 发布

苦涩精灵

最新推荐文章于 2023-12-20 17:27:12 发布

阅读量143

点赞数

分类专栏： Web 文章标签： css js css3

本文链接：https://blog.csdn.net/weixin_43873198/article/details/118090495

版权

Web 专栏收录该内容

118 篇文章 10 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/%20index.css" />
		<link rel="stylesheet" href="css/font-awesome.min.css" />
		<title></title>
	</head>
	<body>
		<nav>
			<div class="title">
				<i class="fa fa-bars"></i>
				<div class="name">云音悦</div>
				<i class="fa fa-search"></i>
			</div>

			<div class="type">
				<ul>
					<li><a href="#">推荐</a></li>
					<li><a href="#">歌手</a></li>
					<li><a href="#">排行榜</a></li>
				</ul>
			</div>
		</nav>

		<div class="carousel-div">
			<div class="d-center">
				<div class="slide-div">
					<div class="carousel"></div>
					<ul>
						<li class="base-li"></li>
						<li class="base-li"></li>
						<li class="base-li"></li>
						<li class="base-li"></li>
						<li class="base-li"></li>
					</ul>
				</div>
			</div>
		</div>

		<script src="js/vue.js"></script>
		<script src="js/jquery-3.4.1.min.js"></script>
		<script>
			var img_i=0,img_j=1;
			var img_list=['url(img/1.jpg) no-repeat','url(img/2.jpg) no-repeat','url(img/3.jpg) no-repeat','url(img/4.jpg) no-repeat','url(img/5.jpg) no-repeat'];
			$(document).ready(function() {
				/* 图片自动轮播 */
				setInterval(function(){
					$(".carousel-div li").removeClass("red-li");
					$(".carousel-div li:eq("+img_i+")").addClass("red-li");
					
					$(".slide-div").css("background", img_list[img_j]);
					$(".slide-div").css("background-size", "600px");
					$(".carousel").css("background", img_list[img_i]);
					$(".carousel").css("background-size", "600px");
					pic_carousel();
					img_i++;
					img_j++;
					if(img_i==img_list.length){
						img_i=0
					}
					if(img_j==img_list.length){
						img_j=0
					}
				},5000);
			})
			
			function pic_carousel(){
				$(".carousel").css("animation", "myFrame-left-right 2s 0s forwards");
				
				setTimeout(function(){
					$(".carousel").css("opacity", "0");
				},2100);
				setTimeout(function(){
					$(".carousel").css("animation", "myFrame-right-left 0.1s 0s forwards");
				},2200);
				setTimeout(function(){
					$(".carousel").css("opacity", "1");
					$(".carousel").css("background", img_list[img_i]);
					$(".carousel").css("background-size", "600px");
				},2500);
			}
		</script>
	</body>
</html>

index.css

@keyframes myFrame-left-right{
	0%{
		transform: translate(0px, 0px);
	}
	100%{
		transform: translate(600px, 0px);
		
	}
}

@keyframes myFrame-right-left{
	0%{
		transform: translate(600px, 0px);
	}
	100%{
		transform: translate(0px, 0px);
	}
}

*{
	margin: 0px;
	padding: 0px;
}

a{
	color: rgba(12, 13, 17,0.5);
	text-decoration: none;
}

a:hover{
	color: rgba(213, 45, 0,1);
}

input,button{
	outline: none;
}

li{
	list-style: none;
}

.d-center{
	width: 600px;
	margin: 0 auto;
	overflow: hidden;
}

nav{
	height: 82px;
	width: 100%;
	background: rgba(212, 68, 57,1);
}

.title{
	text-align: center;
	width: 100%;
	height: 40px;
	text-align: center;
	color: rgba(255, 255, 255,0.9);
	font-size: 22px;
}

.fa-bars{
	float: left;
	margin: 10px;
	cursor: pointer;
}

.fa-search{
	float: right;
	margin: 10px;
	cursor: pointer;
}

.name{
	display: inline-block;
	margin: 6px;
}

.type{
	float: left;
	width: 100%;
	height: 40px;
}

.type li{
	float: left; 
	width: 33.3%;
	height: 30px;
	text-align: center;
}

.type li a{
	height: 30px;
	line-height: 30px;
	color: rgba(255, 255, 255,0.9);
}

.type li a:hover{
	font-weight: bold;
	border-bottom: 2px solid rgba(255, 255, 255,0.9);
}

.carousel-div{
	width: 100%;
	height: 230px;
	background: rgba(199, 195, 183,0.3);
	overflow: hidden;
}

.carousel{
	width: 100%;
	margin-left: 0px;
	height: 230px;
	
	background-size: 600px;
	overflow: hidden;
}

.slide-div{
	width: 100%;
	margin-left: 0px;
	height: 230px;
	background: url(../img/1.jpg) no-repeat;
	background-size: 600px;
	transition: all .1s;
	overflow: hidden;
}

.slide-div ul{
	position: absolute;
	margin: -20px 0 0 270px;
}

.base-li{
	float: left;
	width: 10px;
	height: 10px;
	background-color: rgba(255, 255, 255,0.7);
	border-radius: 5px;
	margin: 0 4px 0 4px;
	cursor: pointer;
}

.red-li{
	float: left;
	width: 10px;
	height: 10px;
	background-color: rgba(212, 68, 57,1);
	border-radius: 5px;
	margin: 0 4px 0 4px;
	cursor: pointer;
}

.slide-div li:hover{
	background-color: rgba(212, 68, 57,1);
}

#style-red{
	background-color: rgba(212, 68, 57,1);
}

效果GIF图：
在这里插入图片描述

苦涩精灵

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
（CSS+JS+Jquery）自动轮播图

index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/%20index.css" /> <link rel="stylesheet" href="css/font-awesome.min.css" /> <title></title> </head&
复制链接

扫一扫