HTML如何让网页上盒子里的三张图片来回滚动

在HTML中，可以使用JavaScript或者CSS动画来实现在一个盒子（通常称为轮播容器）里显示三张图片的轮流切换效果。这里提供一种简单的CSS3动画实现方法：

1. 首先，创建一个包含三个`<img>`标签的轮播容器，每个`<img>`代表一张图片：

<div class="carousel">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

2. 使用CSS设置轮播容器样式，包括宽度、高度和初始位置：

.carousel {
  display: flex;
  width: 500px; /* 容器宽度 */
  height: 300px; /* 容器高度 */
  overflow: hidden; /* 隐藏超出的部分 */
}

.carousel img {
  width: 100%;
  height: auto;
  position: absolute; /* 设置图片绝对定位 */
}

3. 添加关键帧动画（@keyframes）来控制图片的移动：

@keyframes slide {
  0% { transform: translateX(0); }
  25% { transform: translateX(-100%); }
  75% { transform: translateX(-150%); }
  100% { transform: translateX(-200%); }
}

.carousel img:nth-child(1) {
  animation: slide 4s infinite ease-in-out; /* 动画持续时间、无限循环、缓动函数 */
}
.carousel img:nth-child(2) {
  animation: slide 4s 2s infinite ease-in-out; /* 每隔2秒开始第二个图片的动画 */
}
.carousel img:nth-child(3) {
  animation: slide 4s 4s infinite ease-in-out; /* 每隔4秒开始第三个图片的动画 */
}

这样，当页面加载时，第一张图片会从左往右滑出，然后第二张图片接着滑入，依次类推。