js写一个qq飞车官网的无缝轮播

以下是一个简单的 QQ飞车官网无缝轮播的示例，使用了 JavaScript 和 CSS 实现：

HTML:

<div class="slider">
  <div class="slide">
    <img src="slide1.jpg" alt="slide1">
  </div>
  <div class="slide">
    <img src="slide2.jpg" alt="slide2">
  </div>
  <div class="slide">
    <img src="slide3.jpg" alt="slide3">
  </div>
  <div class="slide">
    <img src="slide4.jpg" alt="slide4">
  </div>
</div>

CSS:

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

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide.active {
  animation: slide 8s infinite;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-100%);
  }
  45% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(-200%);
  }
  70% {
    transform: translateX(-200%);
  }
  75% {
    transform: translateX(-300%);
  }
  95% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-400%);
  }
}

在上面的代码中，我们使用了 CSS 中的 `animation` 属性来实现无缝轮播。我们定义了一个名为 `slide` 的动画，该动画在 8 秒钟内从左向右平移轮播图。我们还使用了无限循环的 `infinite` 属性，以便轮播图可以无限循环。

JavaScript:

// 无需 JavaScript

在这种情况下，我们不需要使用 JavaScript 来控制轮播图的切换，因为我们已经使用 CSS 中的 `animation` 属性实现了无限循环的轮播。