如何使用li标记和img滑动图像

<ul class="slider">
  <li><img src="image1.jpg" alt="Image 1"></li>
  <li><img src="image2.jpg" alt="Image 2"></li>
  <li><img src="image3.jpg" alt="Image 3"></li>
</ul>

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

.slider li {
  width: 500px;
  float: left;
}

var slider = document.querySelector('.slider');
var sliderItems = document.querySelectorAll('.slider li');
var currentIndex = 0;

function slideTo(index) {
  // 计算滑动距离
  var distance = -index * slider.offsetWidth;
  // 设置滑动动画
  slider.style.transform = 'translateX(' + distance + 'px)';
}

function nextSlide() {
  currentIndex++;
  if (currentIndex >= sliderItems.length) {
    currentIndex = 0;
  }
  slideTo(currentIndex);
}

// 每隔3秒切换到下一张图像
setInterval(nextSlide, 3000);