js实现横排多个dom自动横向轮播滚动,且能够手动控制单个滚动距离

实现横排多个dom自动横向轮播滚动的方法比较多，以下是其中一种实现方法：

HTML结构：

<div class="container">
  <div class="wrapper">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</div>

CSS样式：

.container {
  width: 100%;
  overflow: hidden;
}

.wrapper {
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.item {
  flex: 0 0 20%;
  margin-right: 20px;
}

JS实现：

// 获取容器和包裹元素
const container = document.querySelector('.container');
const wrapper = document.querySelector('.wrapper');
const items = document.querySelectorAll('.item');

// 计算每个item的宽度和margin-right的值
const itemWidth = items[0].offsetWidth + parseInt(getComputedStyle(items[0]).marginRight);
const wrapperWidth = itemWidth * items.length;

// 设置包裹元素的宽度
wrapper.style.width = `${wrapperWidth}px`;

// 自动轮播
let intervalId;
function startAutoPlay() {
  intervalId = setInterval(() => {
    const currentX = Math.abs(parseInt(wrapper.style.transform) || 0);
    const nextX = currentX + itemWidth;
    wrapper.style.transform = `translateX(-${nextX}px)`;
  }, 2000);
}
startAutoPlay();

// 手动控制滚动距离
let currentX = 0;
container.addEventListener('click', e => {
  const target = e.target;
  if (target.classList.contains('item')) {
    clearInterval(intervalId);
    const index = Array.from(items).indexOf(target);
    currentX = itemWidth * index;
    wrapper.style.transform = `translateX(-${currentX}px)`;
    startAutoPlay();
  }
});

这段代码实现了自动轮播和手动控制单个滚动距离的功能。其中，自动轮播使用了定时器 setInterval() 实现，每隔 2 秒向左移动一个 item 的宽度；手动控制滚动距离使用了事件委托和事件冒泡的原理，点击 item 时会清除定时器，计算当前的滚动距离并设置包裹元素的 transform 属性，最后再次启动定时器实现自动轮播。