js实现轮播

2026-01-08 12:17:24JavaScript

实现基础轮播效果

使用HTML结构创建轮播容器和图片元素：

<div class="carousel">
  <div class="carousel-inner">
    <img src="image1.jpg" class="active">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
</div>

添加CSS样式控制轮播显示：

.carousel {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

.carousel-inner img {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.carousel-inner img.active {
  opacity: 1;
}

自动轮播功能实现

编写JavaScript实现自动切换：

let currentIndex = 0;
const images = document.querySelectorAll('.carousel-inner img');
const totalImages = images.length;

function showNextImage() {
  images[currentIndex].classList.remove('active');
  currentIndex = (currentIndex + 1) % totalImages;
  images[currentIndex].classList.add('active');
}

setInterval(showNextImage, 3000);

添加导航控制按钮

扩展HTML结构添加控制按钮：

<div class="carousel-controls">
  <button class="prev">Previous</button>
  <button class="next">Next</button>
</div>

为按钮添加交互功能：

document.querySelector('.prev').addEventListener('click', () => {
  images[currentIndex].classList.remove('active');
  currentIndex = (currentIndex - 1 + totalImages) % totalImages;
  images[currentIndex].classList.add('active');
});

document.querySelector('.next').addEventListener('click', () => {
  showNextImage();
});

响应式轮播改进

添加窗口大小变化时的响应处理：

function resizeCarousel() {
  const carousel = document.querySelector('.carousel');
  carousel.style.height = (carousel.offsetWidth * 0.66) + 'px';
}

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

指示器功能实现

添加轮播指示器HTML：

<div class="carousel-indicators">
  <span class="indicator active" data-index="0"></span>
  <span class="indicator" data-index="1"></span>
  <span class="indicator" data-index="2"></span>
</div>

实现指示器交互：

const indicators = document.querySelectorAll('.indicator');
indicators.forEach(indicator => {
  indicator.addEventListener('click', () => {
    const index = parseInt(indicator.dataset.index);
    images[currentIndex].classList.remove('active');
    indicators[currentIndex].classList.remove('active');
    currentIndex = index;
    images[currentIndex].classList.add('active');
    indicators[currentIndex].classList.add('active');
  });
});

js实现轮播