jquery 走马灯

2026-03-16 22:52:08jquery

jQuery 走马灯实现方法

基础 HTML 结构

<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active"><img src="image1.jpg"></div>
    <div class="carousel-item"><img src="image2.jpg"></div>
    <div class="carousel-item"><img src="image3.jpg"></div>
  </div>
  <button class="carousel-prev">←</button>
  <button class="carousel-next">→</button>
</div>

CSS 样式准备

.carousel {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}
.carousel-inner {
  display: flex;
  transition: transform 0.5s ease;
}
.carousel-item {
  min-width: 100%;
}
.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

jQuery 核心逻辑

$(document).ready(function() {
  let currentIndex = 0;
  const $items = $('.carousel-item');
  const itemCount = $items.length;

  // 下一张按钮
  $('.carousel-next').click(function() {
    currentIndex = (currentIndex + 1) % itemCount;
    updateCarousel();
  });

  // 上一张按钮
  $('.carousel-prev').click(function() {
    currentIndex = (currentIndex - 1 + itemCount) % itemCount;
    updateCarousel();
  });

  // 自动轮播
  let autoPlay = setInterval(() => {
    currentIndex = (currentIndex + 1) % itemCount;
    updateCarousel();
  }, 3000);

  // 鼠标悬停暂停
  $('.carousel').hover(
    () => clearInterval(autoPlay),
    () => autoPlay = setInterval(() => {
      currentIndex = (currentIndex + 1) % itemCount;
      updateCarousel();
    }, 3000)
  );

  function updateCarousel() {
    $('.carousel-inner').css('transform', `translateX(-${currentIndex * 100}%)`);
  }
});

扩展功能实现

添加指示器

<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>

$('.indicator').click(function() {
  currentIndex = $(this).data('index');
  updateCarousel();
  updateIndicators();
});

function updateIndicators() {
  $('.indicator').removeClass('active');
  $(`.indicator[data-index="${currentIndex}"]`).addClass('active');
}

淡入淡出效果 修改 CSS 和 JavaScript：

jquery 走马灯

.carousel-inner {
  position: relative;
}
.carousel-item {
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease;
}
.carousel-item.active {
  opacity: 1;
}

function updateCarousel() {
  $('.carousel-item').removeClass('active');
  $($items[currentIndex]).addClass('active');
}

响应式处理

function initCarousel() {
  const carouselWidth = $('.carousel').width();
  $('.carousel-item').width(carouselWidth);
}

$(window).resize(initCarousel);
initCarousel();