html左右滑动切换图片

您可以使用HTML和CSS创建一个包含多张图片的容器，并使用JavaScript添加左右滑动功能。

以下是一个示例代码：

HTML:

<div class="slider-container">
  <div class="slider-wrapper">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

CSS:

.slider-container {
  overflow-x: scroll;
  white-space: nowrap;
}

.slider-wrapper {
  display: inline-block;
}

JavaScript:

var sliderWrapper = document.querySelector('.slider-wrapper');
var images = sliderWrapper.querySelectorAll('img');
var imageWidth = images[0].clientWidth;
var totalWidth = imageWidth * images.length;
sliderWrapper.style.width = totalWidth + 'px';

var sliderContainer = document.querySelector('.slider-container');
var scrollPosition = 0;
var scrollInterval;

function startScroll() {
  scrollInterval = setInterval(function() {
    scrollPosition += 5;
    if (scrollPosition > totalWidth - sliderContainer.clientWidth) {
      scrollPosition = 0;
    }
    sliderContainer.scrollLeft = scrollPosition;
  }, 10);
}

function stopScroll() {
  clearInterval(scrollInterval);
}

sliderContainer.addEventListener('mouseover', stopScroll);
sliderContainer.addEventListener('mouseout', startScroll);

startScroll();

在这个例子中，我们使用CSS将滑块容器设置为水平滚动，并将滑块包装器设置为内联块显示。然后，我们使用JavaScript计算每个图像的宽度并设置包装器的总宽度，以便所有图像都适合其中。

我们还定义了两个函数，一个用于启动滚动，一个用于停止滚动。我们将这些函数附加到滑块容器的mouseover和mouseout事件上，以便在鼠标悬停时停止滚动，并在鼠标离开时重新启动滚动。

最后，我们使用setInterval函数和scrollLeft属性在每个10毫秒内滚动容器。我们还检查滚动位置是否已到达容器的末尾，并在到达时将其重置为0，以便图像可以无限循环。