当前位置：首页 > jquery

jquery自动轮播

2026-03-16 18:06:42jquery

jQuery 自动轮播实现方法

准备HTML结构 创建包含轮播图片的容器和导航按钮的HTML结构：

<div class="slider">
  <div class="slides">
    <img src="image1.jpg" alt="Slide 1">
    <img src="image2.jpg" alt="Slide 2">
    <img src="image3.jpg" alt="Slide 3">
  </div>
  <button class="prev">Previous</button>
  <button class="next">Next</button>
</div>

添加CSS样式 设置轮播容器和图片的样式确保正确显示：

jquery自动轮播

.slider {
  position: relative;
  width: 800px;
  height: 400px;
  overflow: hidden;
}
.slides {
  display: flex;
  width: 300%;
  transition: transform 0.5s ease;
}
.slides img {
  width: 800px;
  height: 400px;
}

编写jQuery代码 实现自动轮播和手动控制功能：

$(document).ready(function(){
  let currentSlide = 0;
  const $slides = $('.slides');
  const slideCount = $slides.children().length;

  // 自动轮播
  let autoSlide = setInterval(nextSlide, 3000);

  function nextSlide() {
    currentSlide = (currentSlide + 1) % slideCount;
    updateSlide();
  }

  function prevSlide() {
    currentSlide = (currentSlide - 1 + slideCount) % slideCount;
    updateSlide();
  }

  function updateSlide() {
    $slides.css('transform', `translateX(-${currentSlide * 100}%)`);
  }

  // 手动控制
  $('.next').click(function(){
    clearInterval(autoSlide);
    nextSlide();
    autoSlide = setInterval(nextSlide, 3000);
  });

  $('.prev').click(function(){
    clearInterval(autoSlide);
    prevSlide();
    autoSlide = setInterval(nextSlide, 3000);
  });
});

添加悬停暂停功能 当鼠标悬停在轮播区域时暂停自动轮播：

jquery自动轮播

$('.slider').hover(
  function() {
    clearInterval(autoSlide);
  },
  function() {
    autoSlide = setInterval(nextSlide, 3000);
  }
);

响应式调整 根据窗口大小调整轮播尺寸：

$(window).resize(function(){
  const newWidth = $(window).width() > 800 ? 800 : $(window).width();
  $('.slider, .slides img').css({
    'width': newWidth,
    'height': newWidth * 0.5
  });
});

注意事项