js实现四张图片轮播

实现四张图片轮播的JavaScript方法

HTML结构

创建一个包含四张图片的轮播容器，并添加导航按钮：

<div class="carousel-container">
  <div class="carousel-slide">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <img src="image4.jpg" alt="Image 4">
  </div>
  <button id="prevBtn">Prev</button>
  <button id="nextBtn">Next</button>
</div>

CSS样式

设置轮播样式确保每次只显示一张图片：

.carousel-container {
  width: 600px;
  height: 400px;
  margin: auto;
  overflow: hidden;
  position: relative;
}

.carousel-slide {
  display: flex;
  width: 2400px; /* 4 images x 600px */
  transition: transform 0.5s ease-in-out;
}

.carousel-slide img {
  width: 600px;
  height: 400px;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

#prevBtn {
  left: 5px;
}

#nextBtn {
  right: 5px;
}

JavaScript逻辑

使用DOM操作实现轮播功能：

const carouselSlide = document.querySelector('.carousel-slide');
const carouselImages = document.querySelectorAll('.carousel-slide img');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');

let counter = 0;
const size = carouselImages[0].clientWidth;

// 初始化位置
carouselSlide.style.transform = `translateX(${-size * counter}px)`;

// 下一张按钮事件
nextBtn.addEventListener('click', () => {
  if (counter >= carouselImages.length - 1) return;
  counter++;
  carouselSlide.style.transform = `translateX(${-size * counter}px)`;
});

// 上一张按钮事件
prevBtn.addEventListener('click', () => {
  if (counter <= 0) return;
  counter--;
  carouselSlide.style.transform = `translateX(${-size * counter}px)`;
});

// 自动轮播（可选）
setInterval(() => {
  if (counter >= carouselImages.length - 1) {
    counter = 0;
  } else {
    counter++;
  }
  carouselSlide.style.transform = `translateX(${-size * counter}px)`;
}, 3000);

无限循环改进方案

修改边界条件实现无缝循环：

nextBtn.addEventListener('click', () => {
  if (counter >= carouselImages.length - 1) {
    counter = 0;
  } else {
    counter++;
  }
  carouselSlide.style.transform = `translateX(${-size * counter}px)`;
});

prevBtn.addEventListener('click', () => {
  if (counter <= 0) {
    counter = carouselImages.length - 1;
  } else {
    counter--;
  }
  carouselSlide.style.transform = `translateX(${-size * counter}px)`;
});

响应式处理

添加窗口大小变化监听：

window.addEventListener('resize', () => {
  const newSize = carouselImages[0].clientWidth;
  carouselSlide.style.transform = `translateX(${-newSize * counter}px)`;
});