当前位置：首页 > jquery

jquery轮播代码

2026-04-08 03:35:27jquery

jquery轮播代码

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

HTML结构

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

CSS样式

.slider {
  position: relative;
  width: 800px;
  margin: 0 auto;
  overflow: hidden;
}
.slider-container {
  display: flex;
  transition: transform 0.5s ease;
}
.slide {
  min-width: 100%;
}
.slide img {
  width: 100%;
  display: block;
}
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.prev { left: 10px; }
.next { right: 10px; }
.dots-container {
  text-align: center;
  padding: 10px;
}
.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
}
.dot.active {
  background: #333;
}

jQuery代码

$(document).ready(function() {
  const $slider = $('.slider');
  const $slides = $('.slide');
  const $dotsContainer = $('.dots-container');
  const $prevBtn = $('.prev');
  const $nextBtn = $('.next');

  // 创建指示点
  $slides.each(function(index) {
    $dotsContainer.append(`<div class="dot" data-index="${index}"></div>`);
  });

  const $dots = $('.dot');
  let currentIndex = 0;
  let slideCount = $slides.length;
  let interval;

  // 更新轮播状态
  function updateSlider() {
    $('.slide').removeClass('active');
    $slides.eq(currentIndex).addClass('active');
    $('.dot').removeClass('active');
    $dots.eq(currentIndex).addClass('active');
    $('.slider-container').css('transform', `translateX(-${currentIndex * 100}%)`);
  }

  // 下一张
  function nextSlide() {
    currentIndex = (currentIndex + 1) % slideCount;
    updateSlider();
  }

  // 上一张
  function prevSlide() {
    currentIndex = (currentIndex - 1 + slideCount) % slideCount;
    updateSlider();
  }

  // 自动轮播
  function startAutoPlay() {
    interval = setInterval(nextSlide, 3000);
  }

  // 停止自动轮播
  function stopAutoPlay() {
    clearInterval(interval);
  }

  // 事件绑定
  $nextBtn.on('click', function() {
    stopAutoPlay();
    nextSlide();
    startAutoPlay();
  });

  $prevBtn.on('click', function() {
    stopAutoPlay();
    prevSlide();
    startAutoPlay();
  });

  $dots.on('click', function() {
    stopAutoPlay();
    currentIndex = $(this).data('index');
    updateSlider();
    startAutoPlay();
  });

  $slider.on('mouseenter', stopAutoPlay);
  $slider.on('mouseleave', startAutoPlay);

  // 初始化
  updateSlider();
  startAutoPlay();
});