js实现轮播图完整代码

以下是一个基于JavaScript实现轮播图的完整代码示例：

HTML代码：

<div class="slider">
  <div class="slide-container">
    <div class="slide"><img src="slide1.jpg"></div>
    <div class="slide"><img src="slide2.jpg"></div>
    <div class="slide"><img src="slide3.jpg"></div>
    <div class="slide"><img src="slide4.jpg"></div>
  </div>
  <div class="prev"><i class="fas fa-chevron-left"></i></div>
  <div class="next"><i class="fas fa-chevron-right"></i></div>
</div>

CSS代码：

.slider {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.slide-container {
  display: flex;
  width: 400%;
}
.slide {
  flex: 1;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  cursor: pointer;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 20px;
}
.prev {
  left: 0;
}
.next {
  right: 0;
}

JavaScript代码：

const slider = document.querySelector('.slider');
const slideContainer = slider.querySelector('.slide-container');
const slides = slider.querySelectorAll('.slide');
const prevBtn = slider.querySelector('.prev');
const nextBtn = slider.querySelector('.next');

let counter = 1;
const slideWidth = slides[0].clientWidth;

slideContainer.style.transform = `translateX(${-slideWidth * counter}px)`;

prevBtn.addEventListener('click', () => {
  if (counter <= 0) return;
  slideContainer.style.transition = 'transform 0.4s ease-in-out';
  counter--;
  slideContainer.style.transform = `translateX(${-slideWidth * counter}px)`;
});

nextBtn.addEventListener('click', () => {
  if (counter >= slides.length - 1) return;
  slideContainer.style.transition = 'transform 0.4s ease-in-out';
  counter++;
  slideContainer.style.transform = `translateX(${-slideWidth * counter}px)`;
});

slideContainer.addEventListener('transitionend', () => {
  if (slides[counter].classList.contains('last-clone')) {
    slideContainer.style.transition = 'none';
    counter = slides.length - 2;
    slideContainer.style.transform = `translateX(${-slideWidth * counter}px)`;
  }
  if (slides[counter].classList.contains('first-clone')) {
    slideContainer.style.transition = 'none';
    counter = slides.length - counter;
    slideContainer.style.transform = `translateX(${-slideWidth * counter}px)`;
  }
});

此代码实现了基本的轮播图功能，包括自动滚动、手动滚动、循环滚动等。如果需要更多功能，可以根据实际需要进行修改和扩展。