js轮播图

JavaScript 实现轮播图可以使用多种方式，以下是一种基于原生 JavaScript 的实现方法：

1. HTML 结构

<div class="slider">
  <div class="slides">
    <img src="img1.jpg" alt="">
    <img src="img2.jpg" alt="">
    <img src="img3.jpg" alt="">
  </div>
  <div class="controls">
    <button class="prev">Previous</button>
    <button class="next">Next</button>
  </div>
</div>

2. CSS 样式

.slider {
  position: relative;
}

.slides {
  display: flex;
}

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

.controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.prev,
.next {
  background-color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.prev:hover,
.next:hover {
  background-color: #ccc;
}

3. JavaScript 代码

const slider = document.querySelector('.slider');
const slides = slider.querySelector('.slides');
const prevBtn = slider.querySelector('.prev');
const nextBtn = slider.querySelector('.next');
const slideWidth = slides.firstElementChild.clientWidth;

let slideIndex = 0;

function showSlide() {
  slides.style.transform = `translateX(-${slideIndex * slideWidth}px)`;
}

function prevSlide() {
  if (slideIndex > 0) {
    slideIndex--;
  } else {
    slideIndex = slides.children.length - 1;
  }
  showSlide();
}

function nextSlide() {
  if (slideIndex < slides.children.length - 1) {
    slideIndex++;
  } else {
    slideIndex = 0;
  }
  showSlide();
}

prevBtn.addEventListener('click', prevSlide);
nextBtn.addEventListener('click', nextSlide);

showSlide();

这段 JavaScript 代码实现了点击上一个和下一个按钮时，切换到上一个或下一个轮播项的功能，其中需要用到 CSS 中的 flexbox 布局和 transform 属性。