html左右自动滑动图片

实现这个功能可以使用 CSS3 中的动画效果和 transform 属性。以下是一个简单的示例代码：

HTML 代码：

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

CSS 代码：

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

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 1s ease-in-out;
}

.slider img.active {
  opacity: 1;
  transform: translateX(0%);
}

.slider img.prev {
  transform: translateX(-100%);
}

.slider img.next {
  transform: translateX(100%);
}

JavaScript 代码：

var images = document.querySelectorAll('.slider img');
var currentImageIndex = 0;
var sliderInterval = setInterval(nextImage, 3000);

function nextImage() {
  images[currentImageIndex].classList.remove('active');
  images[currentImageIndex].classList.add('prev');
  currentImageIndex = (currentImageIndex + 1) % images.length;
  images[currentImageIndex].classList.add('active');
}

function prevImage() {
  images[currentImageIndex].classList.remove('active');
  images[currentImageIndex].classList.add('next');
  currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
  images[currentImageIndex].classList.add('active');
}

// 添加鼠标事件
document.querySelector('.slider').addEventListener('mouseover', function() {
  clearInterval(sliderInterval);
});

document.querySelector('.slider').addEventListener('mouseout', function() {
  sliderInterval = setInterval(nextImage, 3000);
});

这段代码会自动滑动图片，每隔 3 秒钟自动滑动到下一张，同时添加鼠标事件，当鼠标移入时停止自动滑动，当鼠标移出时恢复自动滑动。