当前位置：首页 > JavaScript

js实现四张图片轮播

2026-01-30 20:33:35JavaScript

实现四张图片轮播的方法

HTML 结构

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

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

CSS 样式

设置轮播容器的样式，确保图片水平排列且隐藏溢出部分。

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

.slides {
  display: flex;
  transition: transform 0.5s ease;
}

.slides img {
  width: 600px;
  height: 400px;
  object-fit: cover;
}

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

.prev { left: 10px; }
.next { right: 10px; }

JavaScript 逻辑

通过 JavaScript 控制图片轮播的切换逻辑。

js实现四张图片轮播

const slides = document.querySelector('.slides');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
let currentIndex = 0;
const totalSlides = document.querySelectorAll('.slides img').length;

function updateSlide() {
  slides.style.transform = `translateX(-${currentIndex * 100}%)`;
}

prevBtn.addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
  updateSlide();
});

nextBtn.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % totalSlides;
  updateSlide();
});

// 自动轮播（可选）
setInterval(() => {
  currentIndex = (currentIndex + 1) % totalSlides;
  updateSlide();
}, 3000);