js写QQ飞车的无缝轮播

以下是使用原生JavaScript实现QQ飞车无缝轮播的示例代码：

HTML部分：

<div class="slider-container">
  <ul class="slider-list">
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
    <li><img src="image4.jpg"></li>
  </ul>
</div>

CSS部分：

.slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.slider-list {
  display: flex;
  width: 400%; /* 4个轮播图 */
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.slider-list li {
  flex: 1;
  list-style: none;
}

JavaScript部分：

var sliderContainer = document.querySelector('.slider-container');
var sliderList = document.querySelector('.slider-list');
var sliderItems = document.querySelectorAll('.slider-list li');
var sliderWidth = sliderContainer.offsetWidth;
var currentSlide = 0;

// 复制第一张轮播图并添加到末尾
var firstSlideClone = sliderItems[0].cloneNode(true);
sliderList.appendChild(firstSlideClone);

// 开始轮播
var sliderInterval = setInterval(nextSlide, 3000);

// 轮播函数
function nextSlide() {
  currentSlide++;
  if (currentSlide >= sliderItems.length) {
    currentSlide = 0;
  }
  // 计算轮播容器的左偏移量
  var offset = -currentSlide * sliderWidth;
  // 使用CSS3的transform属性进行平移动画
  sliderList.style.transform = 'translateX(' + offset + 'px)';
}

// 当轮播容器过渡结束时，检查是否需要将容器左移回第一张轮播图的位置
sliderList.addEventListener('transitionend', function() {
  if (currentSlide === sliderItems.length - 1) {
    currentSlide = 0;
    sliderList.style.transition = 'none';
    var offset = -currentSlide * sliderWidth;
    sliderList.style.transform = 'translateX(' + offset + 'px)';
  }
});

以上代码实现了QQ飞车无缝轮播的功能，使用CSS3的transform属性进行平移动画，使用transitionend事件检测轮播容器的过渡结束，实现轮播图的无缝循环。