css实现图片左右滑动

在CSS中实现图片左右滑动，通常使用CSS动画和`position`属性结合JavaScript来完成，尤其是使用`transition`、`transform`和`display: flex`等技术。以下是一个基本的示例：

.container {
  display: flex;
  overflow-x: auto;
  white-space: nowrap; /* 防止文本换行 */
  width: 200%; /* 创建滚动效果 */
  transition: transform 0.5s ease;
}

.item {
  flex: 0 0 auto;
  margin-right: 10px; /* 图片间的间隔 */
  width: 50%; /* 每张图片占据一半宽度 */
}

.item img {
  max-width: 100%;
  height: auto;
}

/* 使用JavaScript控制滑动 */
.go-left {
  transform: translateX(-100%);
}

.go-right {
  transform: translateX(100%);
}

在这个例子中，`.container`是包含图片的容器，设置了`overflow-x: auto`允许水平滚动。`.item`是每个图片容器，使用`transform: translateX()`实现左右移动。`go-left`和`go-right`是两个类名，可以通过JavaScript添加或移除这些类名来控制图片的滑动方向。