js实现横排多个dom自动左右移动

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

1. 使用 CSS 将多个 DOM 元素横排，并设置好宽度和高度等样式。
2. 使用 JavaScript 获取这些 DOM 元素，并计算它们的总宽度。
3. 使用 `setInterval()` 函数来定时执行一个函数，控制 DOM 元素的移动。
4. 在移动函数中，使用 `transform` 属性来改变 DOM 元素的位置。

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

HTML 代码：

<div id="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: 500px;
  height: 100px;
  overflow: hidden;
  white-space: nowrap;
}

.item {
  display: inline-block;
  width: 100px;
  height: 100%;
  background-color: #ccc;
  text-align: center;
  font-size: 24px;
}

JavaScript 代码：

const container = document.getElementById('container')
const items = container.querySelectorAll('.item')
let totalWidth = 0
let direction = 1
let currentPosition = 0

// 计算总宽度
items.forEach((item) => {
  totalWidth += item.offsetWidth
})

// 设置定时器，每隔 10 毫秒执行一次 move 函数
setInterval(move, 10)

function move() {
  // 计算下一步的位置
  currentPosition += direction * 5

  // 判断是否到达边界，需要改变方向
  if (currentPosition < 0 || currentPosition > totalWidth - container.offsetWidth) {
    direction = -direction
  }

  // 移动所有元素
  items.forEach((item) => {
    item.style.transform = `translateX(${-currentPosition}px)`
  })
}

在这个示例中，我们通过计算所有元素的宽度来确定容器的总宽度，并使用 `setInterval()` 函数定时执行 `move()` 函数来控制元素的移动。在 `move()` 函数中，我们通过改变 `transform` 属性的值来移动所有元素，并且在达到容器边界时改变移动方向。