简易轮播图制作（HTML+CSS+JS）
一、结构思路
外层容器固定宽高，溢出隐藏
图片列表横向排列
JS 控制整体左右平移切换
加左右箭头 + 底部小圆点 + 自动播放
完整代码
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
/* 外层盒子 */
.banner {
width: 600px;
height: 350px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
/* 图片容器 */
.img-box {
width: 3000px;
height: 100%;
display: flex;
transition: all 0.5s ease;
}
.img-box img {
width: 600px;
height: 100%;
object-fit: cover;
}
/* 左右箭头 */
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: rgba(0,0,0,.5);
color: #fff;
text-align: center;
line-height: 40px;
font-size: 20px;
cursor: pointer;
z-index: 10;
}
.left {left: 0;}
.right {right: 0;}
/* 小圆点 */
.dot {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
}
.dot span {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
background: #ccc;
cursor: pointer;
}
.dot span.active {
background: #f40;
}
</style>
</head>
<body>
<div class="banner">
<div class="img-box">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
</div>
<!-- 箭头 -->
<div class="arrow left"><</div>
<div class="arrow right">></div>
<!-- 圆点 -->
<div class="dot">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
核心要点
overflow: hidden 只显示一张图
图片父级用 flex 横向排开
通过 translateX 位移实现切换
下标判断边界，实现循环
定时器做自动轮播，鼠标悬停暂停
圆点同步高亮对应图片
快速修改
改尺寸：改 .banner 宽高 + imgW 数值
改切换速度：改 transition 时间
改自动播放间隔：改 setInterval 毫秒数
增删图片：同步增删 img 和 span 圆点
浙公网安备 33010602011771号