html左右滑动切换图片

要实现HTML左右滑动切换图片，可以使用CSS和JavaScript的组合来实现。以下是一个示例代码：

HTML代码：

<div class="slider">
  <div class="slider-container">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
    <img src="image4.jpg">
  </div>
  <div class="slider-prev"></div>
  <div class="slider-next"></div>
</div>

CSS代码：

.slider {
  position: relative;
  overflow: hidden;
}
.slider-container {
  width: 100%;
  display: flex;
}
.slider-container img {
  flex: 0 0 100%;
  height: auto;
}
.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: #000;
  opacity: 0.5;
  cursor: pointer;
}
.slider-prev:hover,
.slider-next:hover {
  opacity: 1;
}
.slider-prev {
  left: 0;
}
.slider-next {
  right: 0;
}

JavaScript代码：

var sliderContainer = document.querySelector('.slider-container');
var sliderPrev = document.querySelector('.slider-prev');
var sliderNext = document.querySelector('.slider-next');

var slideWidth = sliderContainer.children[0].offsetWidth;
var slideIndex = 0;

sliderPrev.addEventListener('click', function() {
  if (slideIndex > 0) {
    slideIndex--;
    sliderContainer.style.transform = 'translateX(-' + slideIndex * slideWidth + 'px)';
  }
});

sliderNext.addEventListener('click', function() {
  if (slideIndex < sliderContainer.children.length - 1) {
    slideIndex++;
    sliderContainer.style.transform = 'translateX(-' + slideIndex * slideWidth + 'px)';
  }
});

这段代码实现了左右滑动切换图片的功能。其中，CSS代码用于布局和样式，JavaScript代码用于实现左右切换的逻辑。