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 class="prev-btn">❮</button>
  <button class="next-btn">❯</button>
</div>

CSS样式

设置轮播容器和图片的样式：

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

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

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

.prev-btn, .next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

JavaScript逻辑

实现图片轮播的核心功能：

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

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)`;
});

自动轮播功能

添加自动轮播功能：

let autoSlide = setInterval(() => {
  counter++;
  if (counter >= carouselImages.length) {
    counter = 0;
  }
  carouselSlide.style.transform = `translateX(${-size * counter}px)`;
}, 3000);

// 鼠标悬停时暂停自动轮播
carouselContainer.addEventListener('mouseenter', () => {
  clearInterval(autoSlide);
});

// 鼠标离开时恢复自动轮播
carouselContainer.addEventListener('mouseleave', () => {
  autoSlide = setInterval(() => {
    counter++;
    if (counter >= carouselImages.length) {
      counter = 0;
    }
    carouselSlide.style.transform = `translateX(${-size * counter}px)`;
  }, 3000);
});

无限循环改进

实现无限循环效果：

nextBtn.addEventListener('click', () => {
  if (counter >= carouselImages.length - 1) {
    counter = -1;
  }
  counter++;
  carouselSlide.style.transform = `translateX(${-size * counter}px)`;
  carouselSlide.style.transition = "transform 0.5s ease-in-out";
});

prevBtn.addEventListener('click', () => {
  if (counter <= 0) {
    counter = carouselImages.length;
  }
  counter--;
  carouselSlide.style.transform = `translateX(${-size * counter}px)`;
  carouselSlide.style.transition = "transform 0.5s ease-in-out";
});

这个实现包含了基本轮播功能、自动播放和无限循环效果。可以根据需要调整过渡时间、图片大小和其他样式参数。