js怎么实现图片轮播

实现图片轮播的方法

使用HTML和CSS基础结构

创建一个包含图片的容器，设置CSS样式使图片水平排列并隐藏溢出部分。通过JavaScript控制图片的切换。

<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">
  </div>
</div>

.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

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

.slides img {
  width: 500px;
  height: 300px;
  object-fit: cover;
}

通过JavaScript控制切换

使用setInterval实现自动轮播，并通过事件监听器添加手动控制按钮。

const slides = document.querySelector('.slides');
const images = document.querySelectorAll('.slides img');
let currentIndex = 0;

function nextSlide() {
  currentIndex = (currentIndex + 1) % images.length;
  slides.style.transform = `translateX(-${currentIndex * 100}%)`;
}

setInterval(nextSlide, 3000);

添加导航按钮

在HTML中添加前进和后退按钮，并通过JavaScript绑定事件。

<button class="prev">Previous</button>
<button class="next">Next</button>

document.querySelector('.prev').addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  slides.style.transform = `translateX(-${currentIndex * 100}%)`;
});

document.querySelector('.next').addEventListener('click', nextSlide);

添加指示器

创建小圆点指示当前显示的图片，并通过点击切换。

<div class="indicators"></div>

const indicators = document.querySelector('.indicators');
images.forEach((_, index) => {
  const dot = document.createElement('span');
  dot.classList.add('dot');
  dot.addEventListener('click', () => {
    currentIndex = index;
    slides.style.transform = `translateX(-${currentIndex * 100}%)`;
    updateDots();
  });
  indicators.appendChild(dot);
});

function updateDots() {
  const dots = document.querySelectorAll('.dot');
  dots.forEach((dot, index) => {
    dot.classList.toggle('active', index === currentIndex);
  });
}

响应式设计

通过监听窗口大小变化调整轮播容器尺寸。

function resizeSlider() {
  const slider = document.querySelector('.slider');
  slider.style.width = `${window.innerWidth > 500 ? 500 : window.innerWidth}px`;
}

window.addEventListener('resize', resizeSlider);
resizeSlider();

触摸支持

添加触摸事件支持以实现移动端滑动切换。

let touchStartX = 0;
let touchEndX = 0;

slides.addEventListener('touchstart', (e) => {
  touchStartX = e.changedTouches[0].screenX;
});

slides.addEventListener('touchend', (e) => {
  touchEndX = e.changedTouches[0].screenX;
  if (touchEndX < touchStartX) nextSlide();
  if (touchEndX > touchStartX) {
    currentIndex = (currentIndex - 1 + images.length) % images.length;
    slides.style.transform = `translateX(-${currentIndex * 100}%)`;
  }
});