请用html 与 css实现一个图片滚动播放的div块

可以使用下面的 HTML 和 CSS 代码实现一个简单的图片滚动播放的 `div` 块：

HTML:

<div class="slider">
  <div class="slider-container">
    <img src="image-1.jpg" alt="Image 1">
    <img src="image-2.jpg" alt="Image 2">
    <img src="image-3.jpg" alt="Image 3">
    <img src="image-4.jpg" alt="Image 4">
    <img src="image-5.jpg" alt="Image 5">
  </div>
</div>

CSS:

.slider {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.slider-container {
  width: 100%;
  height: 100%;
  white-space: nowrap;
  position: absolute;
  top: 0;
  left: 0;
  animation: slide 20s linear infinite;
}

.slider-container img {
  display: inline-block;
  height: 100%;
  margin-right: 10px;
}

@keyframes slide {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

解释：

- `div` 标签设置了 `width` 和 `height`，并设置了 `overflow: hidden`，以便隐藏超出容器大小的图像。
- `position: relative` 用来设置父级元素，以便在 `position: absolute` 的子元素中定位。
- `.slider-container` 设置了 `white-space: nowrap`，以便将所有图像放在同一行。
- 图像设置为 `display: inline-block`，并设置 `height: 100%`，以适应父级容器的高度。
- `@keyframes` 设置了一个动画，将 `.slider-container` 中的所有图像向左滚动。

这是一个简单的实现，可以根据需要进行修改和扩展。