纯html+css制作banner轮播图

应用css3高级特效 translateX,一般的滑动轮播图都是在水平方向上的滑动，原理是：在一个盒子里面把所需用到的图片放里面，进行float浮动，经过浮动后的元素是没有的间隙的，然后在装图片的盒子外边再外套一个盒子，进行溢出隐藏over-flow:hidden。装图片的盒子宽度是与所有图片的宽高一直，外套盒子宽高与一张banner图一致。/* 显示一张图片的宽高 *//*所有图片总宽度 */

gdlm778

2914人浏览 · 2022-08-05 23:45:00

gdlm778 · 2022-08-05 23:45:00 发布

banner 轮播图

方法：应用css3高级特效 translate X
一般的滑动轮播图都是在水平方向上的滑动，
原理是：在一个盒子里面把所需用到的图片放里面，进行float浮动，经过浮动后的元素是没有的间隙的，然后在装图片的盒子外边再外套一个盒子，进行溢出隐藏over-flow:hidden
装图片的盒子宽度是与所有图片的宽高一直，外套盒子宽高与一张banner图一致。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img{
				width: 757px;
				height: 500px;
			}
			/* 显示一张图片的宽高 */
			.box{
				width: 757px;
				height: 500px;
				border: 1px solid red;
				overflow: hidden;
				margin: 0 auto;
			}
						/*所有图片总宽度 */
			.box .imgs{
			   width: 2271px;	
			   height: 500px;
			   /* 图片不换行 */
			   white-space: nowrap;
			   /* =================== */
			   animation: mybox 6s steps(3) infinite;
			}
			
			@keyframes mybox{
				/* ================== */
				0%{
					transform: translateX(0);
				}
				
				100%{
					transform: translateX(-2271px);
				}
			}
			
		</style>
	</head>
	<body>
	   <div class="wrapper">
		   <!-- 显示一张图片宽高 -->
		   <div class="box">
			   <!-- 显示3张图片的宽高 -->
			    <!-- 照片自行更换 -->
			   <div class="imgs">
				   <img src="./img/3.png" alt="">
				   <img src="./img/4.png" alt="">
				   <img src="./img/5.png" alt="">
			   </div>
		   </div>
	   </div>
	</body>
</html>