js水平盒子循环移动

在JavaScript中，如果你想让水平排列的元素（比如在一个数组里表示的一系列div或li）循环地左右移动，你可以利用CSS动画和JavaScript相结合的方式来实现。下面是一个简单的示例：

首先，你需要HTML结构，每个元素包含一个类名用于动画操作：

<div class="box box-1">Box 1</div>
<div class="box box-3">Box 3</div>
<!-- ...更多的盒... -->

然后，给这些元素添加一些基本样式，并创建一个CSS关键帧动画，例如向右移动：

.box {
  display: inline-block;
  width: 100px; /* 根据实际需求设置 */
  height: 50px;
  animation-name: moveRight;
  animation-duration: 2s;
}

@keyframes moveRight {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(100% - 100px)); } /* 当元素回到原始位置时结束动画 */
}

接下来，在JavaScript中，你可以创建一个函数来控制动画的开始、暂停和停止：

let boxes = document.querySelectorAll('.box');
let currentDirection = 'right'; // 初始方向

function animateBoxes(direction) {
  if (direction === 'left') {
    boxes.forEach(box => {
      box.style.animationName = 'moveLeft';
      box.style.transform = 'translateX(-100%)';
    });
  } else if (direction === 'right') {
    boxes.forEach(box => {
      box.style.animationName = 'moveRight';
      box.style.transform = 'translateX(0)';
    });
  }
}

// 开始循环移动
setInterval(() => {
  if (currentDirection === 'right') {
    currentDirection = 'left';
  } else {
    currentDirection = 'right';
  }
  animateBoxes(currentDirection);
}, 4000); // 每隔4秒切换一次方向

这个例子中，`animateBoxes`函数会根据`direction`参数改变所有盒子的动画名字和初始位置，然后通过定时器每4秒钟切换一次方向。