如何使用 div 元素的 background-image 属性实现图片轮播效果？

<div class="slider">
  <div class="slider-wrapper">
    <div id="car1" class="image" style="background-image: url(.https://segmentfault.com/img/car1.jpeg);"></div>
    <div id="car2" class="image" style="background-image: url(.https://segmentfault.com/img/car2.jpeg);"></div>
  </div>
  <div class="indicator"></div>
</div>
<script>
  // 获取元素
  const slider = document.querySelector(".slider");
  const indicator = document.querySelector(".indicator");
  const images = document.querySelectorAll(".image");
  
  // 监听鼠标移动事件
  slider.addEventListener("mousemove", e => {
    // 获取鼠标相对于 slider 左侧的距离
    const x = e.clientX - slider.offsetLeft;
    
    // 计算指示器的 left 值
    indicator.style.left = `${x}px`;
    
    // 计算每张图片的宽度
    const width = slider.offsetWidth / 2;
    
    // 设置每张图片的 left 值
    images.forEach(img => {
      img.style.width = `${x - width / 2}px`;
    });
  });
</script>