js实现横排多个dom自动左右移动,且能够手动控制

可以通过使用`setInterval`定时器和`transform`属性来实现横排多个DOM自动左右移动的效果。具体实现步骤如下：

1. 获取需要进行左右移动的DOM元素，可以使用`querySelectorAll`方法获取到多个DOM元素。

2. 设置一个计时器，定时执行移动操作。可以使用`setInterval`方法设置定时器，每隔一段时间执行一次移动操作。

3. 在移动操作中，通过修改DOM元素的`transform`属性来实现移动效果。可以使用`translateX`来实现水平方向上的移动，通过修改`translateX`的值即可改变DOM元素的位置。

4. 添加手动控制功能。可以通过监听鼠标事件或者触摸事件来实现手动控制，当鼠标或者手指移动时，通过计算移动距离来修改DOM元素的位置。

下面是一个简单的示例代码：

HTML代码：

<div class="container">
  <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>

CSS代码：

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

.item {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
}

JavaScript代码：

// 获取容器和所有需要移动的DOM元素
var container = document.querySelector('.container');
var items = document.querySelectorAll('.item');

// 设置定时器，每隔一段时间执行一次移动操作
var intervalId = setInterval(move, 10);

// 定义移动函数
function move() {
  // 获取当前容器的宽度
  var containerWidth = container.clientWidth;

  // 遍历所有需要移动的DOM元素，修改它们的位置
  for (var i = 0; i < items.length; i++) {
    var item = items[i];
    // 获取当前DOM元素的左侧位置
    var left = item.offsetLeft;

    // 判断是否需要左右移动
    if (left + item.clientWidth <= 0) {
      // 如果DOM元素已经完全移出容器的左侧，则将它移动到容器的右侧
      item.style.transform = 'translateX(' + (containerWidth + item.clientWidth) + 'px)';
    } else if (left >= containerWidth) {
      // 如果DOM元素已经完全移出容器的右侧，则将它移动到容器的左侧
      item.style.transform = 'translateX(' + (-item.clientWidth) + 'px)';
    } else {
      // 如果DOM元素还在容器内部，则继续向左或向右移动
      item.style.transform = 'translateX(' + (left - 1) + 'px)';
    }
  }
}

// 添加手动控制功能
var startX = 0; // 记录手指或鼠标按下时的横坐标
var lastX = 0; // 记录上一次移动时的横坐标
container.addEventListener('mousedown', handleMouseDown);
container.addEventListener('mousemove', handleMouseMove);
container.addEventListener('mouseup', handleMouseUp);
container.addEventListener('touchstart', handleMouseDown);
container.addEventListener('touchmove', handleMouseMove);
container.addEventListener('touchend', handleMouseUp);

function handleMouseDown(event) {
  // 记录按下时的横坐标
  startX = event.pageX || event.touches[0].pageX;
  // 停止定时器，暂停自动滚动
  clearInterval(intervalId);
}

function handleMouseMove(event) {
  if (startX !== 0) {
    // 计算当前移动的距离
    var deltaX = (event.pageX || event.touches[0].pageX) - startX;
    // 计算需要移动的距离
    var moveX = lastX + deltaX;
    // 遍历所有需要移动的DOM元素，修改它们的位置
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      item.style.transform = 'translateX(' + moveX + 'px)';
    }
  }
}

function handleMouseUp(event) {
  if (startX !== 0) {
    // 记录当前位置
    lastX += (event.pageX || event.changedTouches[0].pageX) - startX;
    // 清空按下时记录的位置
    startX = 0;
    // 重新启动定时器，开始自动滚动
    intervalId = setInterval(move, 10);
  }
}