html左右自动滑动图片源代码

以下是一个简单的 HTML/CSS/Javascript 代码，可以实现左右自动滑动图片的效果：

HTML 代码：

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

CSS 代码：

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

.slider-content {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  animation: slide 10s linear infinite;
}

.slider-content img {
  width: 500px;
  height: 300px;
}

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

Javascript 代码：

// 可选：如果需要停止滑动，可以添加以下代码
let sliderContent = document.querySelector('.slider-content');
sliderContent.addEventListener('mouseover', function() {
  this.style.animationPlayState = 'paused';
});

sliderContent.addEventListener('mouseout', function() {
  this.style.animationPlayState = 'running';
});

以上代码实现了一个宽度为 500 像素、高度为 300 像素的容器，其中包含了三张图片。`.slider` 容器设置了 `overflow: hidden`，以隐藏超出容器的部分。`.slider-content` 容器使用了 Flex 布局，子元素进行水平排列。使用 `@keyframes` 实现了从左向右的滑动动画，并设置了 10 秒钟一次循环。JavaScript 代码实现了当鼠标悬停在 `.slider-content` 容器上时，停止滑动动画。