无缝轮播_原生JS手写无缝无限轮播 carousel

好的，关于无缝轮播，可以通过原生JS手写实现。下面是一个简单的无缝无限轮播的carousel实现，你可以参考一下：

HTML部分：

<div class="carousel">
  <ul class="carousel-list">
    <li><img src="img1.jpg"></li>
    <li><img src="img2.jpg"></li>
    <li><img src="img3.jpg"></li>
    <li><img src="img4.jpg"></li>
  </ul>
</div>

CSS部分：

.carousel {
  position: relative;
  overflow: hidden;
  width: 600px;
  height: 400px;
}

.carousel-list {
  position: absolute;
  left: 0;
  top: 0;
  width: 10000px;
  height: 400px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.carousel-list li {
  float: left;
  width: 600px;
  height: 400px;
  margin: 0;
  padding: 0;
}

JS部分：

var carousel = document.querySelector('.carousel');
var carouselList = document.querySelector('.carousel-list');
var carouselItems = document.querySelectorAll('.carousel-list li');
var carouselWidth = carousel.offsetWidth;
var currentIndex = 0;

// 克隆第一张图片，并放到最后
var firstItem = carouselItems[0].cloneNode(true);
carouselList.appendChild(firstItem);

// 点击左右按钮的事件处理函数
function handleButtonClick(event) {
  var target = event.target;
  if (target.classList.contains('prev')) {
    currentIndex--;
    if (currentIndex < 0) {
      currentIndex = carouselItems.length - 1;
      carouselList.style.left = -currentIndex * carouselWidth + 'px';
    }
  } else if (target.classList.contains('next')) {
    currentIndex++;
    if (currentIndex >= carouselItems.length) {
      currentIndex = 0;
      carouselList.style.left = 0;
    }
  }
  var left = -currentIndex * carouselWidth;
  carouselList.style.left = left + 'px';
}

// 绑定左右按钮的事件
var prevBtn = document.createElement('button');
prevBtn.classList.add('prev');
prevBtn.innerText = '上一张';
prevBtn.addEventListener('click', handleButtonClick);

var nextBtn = document.createElement('button');
nextBtn.classList.add('next');
nextBtn.innerText = '下一张';
nextBtn.addEventListener('click', handleButtonClick);

carousel.appendChild(prevBtn);
carousel.appendChild(nextBtn);

这段代码实现了无限轮播，并且可以通过左右按钮控制图片的切换。你可以将这段代码复制到本地运行，看看效果。