当前位置：首页 > jquery

jquery轮播图代码

2026-02-03 18:15:01jquery

jquery轮播图代码

以下是一个基于jQuery实现的简单轮播图代码示例，包含自动播放和手动切换功能：

jquery轮播图代码

HTML结构

<div class="slider-container">
  <div class="slider">
    <img src="image1.jpg" class="slide active">
    <img src="image2.jpg" class="slide">
    <img src="image3.jpg" class="slide">
  </div>
  <button class="prev-btn">←</button>
  <button class="next-btn">→</button>
  <div class="dots-container"></div>
</div>

CSS样式

.slider-container {
  position: relative;
  width: 800px;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
}

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

.slide {
  min-width: 100%;
  height: 400px;
  object-fit: cover;
  display: none;
}

.slide.active {
  display: block;
}

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

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

.dots-container {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #bbb;
  margin: 0 5px;
  cursor: pointer;
}

.dot.active {
  background: #333;
}

jQuery实现

$(document).ready(function() {
  // 初始化小圆点
  $('.slide').each(function(index) {
    $('.dots-container').append('<div class="dot" data-index="'+index+'"></div>');
  });
  $('.dot:first').addClass('active');

  // 自动播放设置
  let interval = setInterval(nextSlide, 3000);

  // 下一张
  function nextSlide() {
    const current = $('.slide.active');
    const next = current.next('.slide').length ? current.next('.slide') : $('.slide:first');

    current.removeClass('active');
    next.addClass('active');
    updateDots();
  }

  // 上一张
  function prevSlide() {
    const current = $('.slide.active');
    const prev = current.prev('.slide').length ? current.prev('.slide') : $('.slide:last');

    current.removeClass('active');
    prev.addClass('active');
    updateDots();
  }

  // 更新小圆点状态
  function updateDots() {
    const index = $('.slide.active').index();
    $('.dot').removeClass('active').eq(index).addClass('active');
  }

  // 按钮事件
  $('.next-btn').click(function() {
    clearInterval(interval);
    nextSlide();
    interval = setInterval(nextSlide, 3000);
  });

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

  // 小圆点点击事件
  $('.dot').click(function() {
    clearInterval(interval);
    const index = $(this).data('index');
    $('.slide').removeClass('active').eq(index).addClass('active');
    updateDots();
    interval = setInterval(nextSlide, 3000);
  });

  // 鼠标悬停暂停
  $('.slider-container').hover(
    function() { clearInterval(interval); },
    function() { interval = setInterval(nextSlide, 3000); }
  );
});