轮播图的学习与实现（使用HTML+css实现轮播图)

本文链接：https://blog.csdn.net/weixin_51264427/article/details/119532910

轮播图原理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style type="text/css">
		/* 1、首尾不衔接
		2、图片之间停留间隙 */
		@keyframes move{
			from{
				left: 0;
			}
			to{
				left: -1200px;
			}
		}
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.window{
				width: 400px;
				height: 300px;
				overflow: hidden;
				position: relative;
				box-shadow:  2px 2px 5px gray;
				margin: 0 auto;
			}
			.move{
				width: 1600px;
				height: 300px;
				position: absolute;
				animation: move 4s linear infinite;
			}
			li{
				width: 400px;
				height: 300px;
				float: left;
			}
			li img{
				display: block;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div class="window">
			<ul class="move">
				<li><img src="img/xhr1.jpeg" alt=""></li>
				<li><img src="img/xhr2.jpeg" alt=""></li>
				<li><img src="img/xhr3.jpeg" alt=""></li>
				<li><img src="img/xhr4.jpeg" alt=""></li>
			</ul>
		</div>
	</body>
</html>

缺点：1、首尾不衔接
2、图片之间停留间隙

优化后最终效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style type="text/css">
		@keyframes move{
			0%{left: 0;}
			24%{left: 0;}
			26%{left: -400px;}
			49%{left: -400px;}
			51%{left: -800px;}
			74%{left: -800px;}
			76%{left: -1200px;}
			98%{left: -1200px;}
			100%{left: -1600px;}
		}
		@keyframes change-color{
			0%{background-color: cyan;}
			25%{background-color: cyan;}
			25.1%{background-color: pink;}
			100%%{background-color: pink;}
		}
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.window{
				width: 400px;
				height: 300px;
				overflow: hidden;
				position: relative;
				box-shadow:  2px 2px 5px gray;
				margin: 0 auto;
			}
			.move{
				width: 2000px;
				height: 300px;
				position: absolute;
				animation: move 8s linear infinite;
			}
			li{
				width: 400px;
				height: 300px;
				float: left;
			}
			li img{
				display: block;
				width: 100%;
				height: 100%;
			}
			.dots{
				width: 200px;
				height: 6px;
				position: absolute;
				left: 100px;
				bottom: 20px;
				display: flex;
				justify-content: space-around;
			}
			.dot{
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background-color: pink;
				animation: change-color 8s linear infinite;
			}
		</style>
	</head>
	<body>
		<div class="window">
			<ul class="move">
				<li><img src="img/xhr1.jpeg" alt=""></li>
				<li><img src="img/xhr2.jpeg" alt=""></li>
				<li><img src="img/xhr3.jpeg" alt=""></li>
				<li><img src="img/xhr4.jpeg" alt=""></li>
				<li><img src="img/xhr1.jpeg" alt=""></li>
			</ul>
			<div class="dots">
				<div class="dot"></div>
				<div class="dot" style="animation-delay: 2s;"></div>
				<div class="dot" style="animation-delay: 4s;"></div>
				<div class="dot" style="animation-delay: 6s;"></div>
			</div>
		</div>
	</body>
</html>