css+html实现一组图片向左移动一张图片的的宽度3秒后又向右移动一张图片的宽度然后一直这样循环

HTML代码：

<div class="slider">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

CSS代码：

.slider {
  width: 100%;
  overflow: hidden;
}

.slider img {
  float: left;
  margin-right: -100%; /* 隐藏图片间的空白 */
  transition: margin-right 3s ease-in-out; /* 过渡动画 */
}

.slider img:last-child {
  margin-right: 0; /* 最后一张图片不隐藏 */
}

.slider.move {
  /* 向左移动一张图片 */
  /* 移动距离为一张图片的宽度 */
  /* 移动时间为3秒 */
  /* 过渡动画为ease-in-out */
  /* 动画结束后再向右移动一张图片 */
  /* 循环播放 */
  animation: move-left 3s ease-in-out forwards, move-right 3s ease-in-out 3s infinite;
}

@keyframes move-left {
  0% {
    margin-right: 0;
  }
  100% {
    margin-right: 100%;
  }
}

@keyframes move-right {
  0% {
    margin-right: 100%;
  }
  100% {
    margin-right: 0;
  }
}

JavaScript代码：

// 获取轮播图容器
var slider = document.querySelector('.slider');

// 开始轮播
function startSlider() {
  // 添加move类名，触发动画
  slider.classList.add('move');
}

// 停止轮播
function stopSlider() {
  // 移除move类名，停止动画
  slider.classList.remove('move');
}

// 3秒后开始轮播
setTimeout(startSlider, 3000);