后端给了这个数据const data = [ {name:"111111公司"}, {name:"2公司"}, {name:"3xxx公司"}, {name:"4xxxx公司"}, {name:"xx5xx公司"}, {name:"x6xxx公司"}, {name:"x7xxx公司"}, {name:"x8xxx公司"}, {name:"xxx9x公司"}, {name:"x10xxx公司"}, {name:"x11xxx公司"}, {name:"xx12xx公司"}, {name:"x13xx公司"}, {name:"xx14xx公司"}, {name:"xx15xx公司"}, {name:"xx16xx公司"}, {name:"xxx17x公司"}, {name:"xx18xx公司"}, {name:"xx19xx公司"}, {name:"xxx20x公司"}, {name:"xx21xx公司"}, {name:"x22xx公司"}, {name:"x23xx公司"}, {name:"x24xx公司"}, ]怎么实现数据循环轮播

你可以使用 JavaScript 和 CSS 实现数据的循环轮播。以下是一个简单的示例代码：

HTML：

<div class="slider-wrap">
  <ul class="slider">
    <!-- 动态生成 li 元素 -->
  </ul>
</div>

CSS：

.slider-wrap {
  overflow: hidden;
  width: 100%;
}

.slider {
  display: flex;
  animation: slider 20s linear infinite;
}

.slider li {
  flex: 1;
  margin: 0 20px;
  text-align: center;
}

@keyframes slider {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

JavaScript：

const data = [
  {name:"111111公司"},
  {name:"2公司"},
  {name:"3xxx公司"},
  {name:"4xxxx公司"},
  {name:"xx5xx公司"},
  {name:"x6xxx公司"},
  {name:"x7xxx公司"},
  {name:"x8xxx公司"},
  {name:"xxx9x公司"},
  {name:"x10xxx公司"},
  {name:"x11xxx公司"},
  {name:"xx12xx公司"},
  {name:"x13xx公司"},
  {name:"xx14xx公司"},
  {name:"xx15xx公司"},
  {name:"xx16xx公司"},
  {name:"xxx17x公司"},
  {name:"xx18xx公司"},
  {name:"xx19xx公司"},
  {name:"xxx20x公司"},
  {name:"xx21xx公司"},
  {name:"x22xx公司"},
  {name:"x23xx公司"},
  {name:"x24xx公司"},
];

const slider = document.querySelector('.slider');

// 动态生成 li 元素
for (let i = 0; i < data.length; i++) {
  const li = document.createElement('li');
  li.textContent = data[i].name;
  slider.appendChild(li.cloneNode(true));
}

// 将前三个 li 元素复制一份并添加到 ul.slider 的末尾，以达到循环轮播的效果
slider.appendChild(slider.children[0].cloneNode(true));
slider.appendChild(slider.children[1].cloneNode(true));
slider.appendChild(slider.children[2].cloneNode(true));

这段代码将在轮播结束后，将前三个 li 元素复制一份并添加到 ul.slider 的末尾，以达到循环轮播的效果。注意，在 CSS 中定义了一个名为 slider 的动画，它将在 20 秒内将 ul.slider 元素向左移动 100% 的距离，从而实现轮播的效果。