js轮播图代码左右切换

以下是一个简单的基于 JavaScript 的轮播图实现，包含左右切换功能：

HTML：

<div class="slider">
  <div class="slider-container">
    <div class="slide">
      <img src="slide1.jpg" alt="">
    </div>
    <div class="slide">
      <img src="slide2.jpg" alt="">
    </div>
    <div class="slide">
      <img src="slide3.jpg" alt="">
    </div>
  </div>
  <div class="slider-controls">
    <button class="slider-control prev">&larr;</button>
    <button class="slider-control next">&rarr;</button>
  </div>
</div>

CSS：

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

.slider-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: 100%;
  display: flex;
  transition: transform 0.3s ease;
}

.slide {
  width: 33.333%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.slider-control {
  font-size: 24px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  padding: 10px;
  margin: 0 10px;
  cursor: pointer;
  outline: none;
}

.slider-control:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

JavaScript：

const slider = document.querySelector('.slider');
const sliderContainer = slider.querySelector('.slider-container');
const slides = slider.querySelectorAll('.slide');
const prevBtn = slider.querySelector('.prev');
const nextBtn = slider.querySelector('.next');
let currentIndex = 0;

function slideTo(index) {
  sliderContainer.style.transform = `translateX(-${index * 100 / slides.length}%)`;
  currentIndex = index;
}

prevBtn.addEventListener('click', () => {
  if (currentIndex === 0) {
    slideTo(slides.length - 1);
  } else {
    slideTo(currentIndex - 1);
  }
});

nextBtn.addEventListener('click', () => {
  if (currentIndex === slides.length - 1) {
    slideTo(0);
  } else {
    slideTo(currentIndex + 1);
  }
});

这段代码实现了一个基于 flexbox 的轮播图，通过监听左右切换按钮的点击事件，调用 `slideTo` 函数来实现切换效果。`slideTo` 函数通过设置 `transform` 属性来移动 `sliderContainer` 元素，从而实现轮播图的切换。