如何通过在 JavaScript 中滚动来移动 html 轮播

Question

我写了一个 js 代码来在滚动时移动轮播，但它不起作用。 问题在哪里？（我不是js专家我的主要语言是c#）

<div class="wrapper mx-auto">
        <i class="fa-solid fa-angle-left"></i>
        <div class="slider">
            <img src="https://www.cnet.com/a/img/resize/3470424f360dd5f4c082bf7a5b7c3f5cd78e298b/hub/2022/10/11/3d748baf-46a0-499c-af4c-6e88a8dec985/pixel-7-pro-watch-lanxon-promo-53.jpg?auto=webp&width=1200" />
            <img src="~/images/note20.jpg" />
            <img src="~/images/s23.jpg" />
            <img src="~/images/google-pixel7.jpg"/>
            <img src="~/images/iphone-xsmax.jpg" />
            <img src="~/images/iphone13.jpg"  />
        </div>
        <i class="fa-solid fa-angle-right"></i>
    </div>

const carousel = document.querySelector(".slider");
const dragging = (e) => {
    carousel.scrollLeft = e.pageX;
}
carousel.addEventListener("mousemove", dragging);

Answer 1

试试这个：

HTML：

<div class="wrapper mx-auto">
  <i class="fa-solid fa-angle-left"></i>
  <div class="slider">
    <img src="https://www.cnet.com/a/img/resize/3470424f360dd5f4c082bf7a5b7c3f5cd78e298b/hub/2022/10/11/3d748baf-46a0-499c-af4c-6e88a8dec985/pixel-7-pro-watch-lanxon-promo-53.jpg?auto=webp&width=1200" />
    <img src="~/images/note20.jpg" />
    <img src="~/images/s23.jpg" />
    <img src="~/images/google-pixel7.jpg"/>
    <img src="~/images/iphone-xsmax.jpg" />
    <img src="~/images/iphone13.jpg"  />
  </div>
  <i class="fa-solid fa-angle-right"></i>
</div>

CSS：

.wrapper {
  width: 100%;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.slider {
  display: flex;
  flex-wrap: nowrap;
  scroll-snap-align: start;
}

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

javascript：

const wrapper = document.querySelector(".wrapper");
let isDown = false;
let startX;
let scrollLeft;

wrapper.addEventListener("mousedown", (e) => {
  isDown = true;
  startX = e.pageX - wrapper.offsetLeft;
  scrollLeft = wrapper.scrollLeft;
});

wrapper.addEventListener("mouseleave", () => {
  isDown = false;
});

wrapper.addEventListener("mouseup", () => {
  isDown = false;
});

wrapper.addEventListener("mousemove", (e) => {
  if (!isDown) return;
  e.preventDefault();
  const x = e.pageX - wrapper.offsetLeft;
  const walk = (x - startX) * 3; // You can adjust the scrolling speed here
  wrapper.scrollLeft = scrollLeft - walk;
});