jquery写轮播图

2026-02-04 02:24:50jquery

基础轮播图实现

使用jQuery实现基础轮播图需要HTML结构、CSS样式和jQuery动画控制。以下是核心实现方式：

HTML结构部分：

<div class="slider">
  <div class="slides">
    <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">❮</button>
  <button class="next">❯</button>
</div>

CSS样式部分：

.slider {
  position: relative;
  width: 800px;
  height: 400px;
  overflow: hidden;
}
.slides {
  display: flex;
  width: 300%;
  transition: transform 0.5s ease;
}
.slide {
  width: 33.333%;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

jQuery控制部分：

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

  $('.next').click(function(){
    currentSlide = (currentSlide + 1) % totalSlides;
    updateSlider();
  });

  $('.prev').click(function(){
    currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
    updateSlider();
  });

  function updateSlider() {
    const offset = -currentSlide * 100;
    $('.slides').css('transform', `translateX(${offset}%)`);
    slides.removeClass('active');
    slides.eq(currentSlide).addClass('active');
  }
});

自动轮播功能扩展

为轮播图添加自动播放功能，需要增加定时器控制：

let autoSlideInterval;

function startAutoSlide() {
  autoSlideInterval = setInterval(() => {
    currentSlide = (currentSlide + 1) % totalSlides;
    updateSlider();
  }, 3000);
}

function stopAutoSlide() {
  clearInterval(autoSlideInterval);
}

// 初始化时启动自动轮播
startAutoSlide();

// 鼠标悬停时暂停
$('.slider').hover(
  function() { stopAutoSlide(); },
  function() { startAutoSlide(); }
);

指示器添加

添加底部小圆点指示器增强用户体验：

HTML新增部分：

<div class="indicators"></div>

CSS新增样式：

.indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  margin: 0 5px;
  cursor: pointer;
}
.indicator.active {
  background: white;
}

jQuery扩展功能：

// 初始化指示器
slides.each(function(index) {
  $('.indicators').append(`<div class="indicator" data-index="${index}"></div>`);
});

// 指示器点击事件
$('.indicator').click(function() {
  currentSlide = $(this).data('index');
  updateSlider();
});

// 更新指示器状态
function updateSlider() {
  // ...原有代码...
  $('.indicator').removeClass('active');
  $('.indicator').eq(currentSlide).addClass('active');
}

响应式处理

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

function resizeSlider() {
  const sliderWidth = $('.slider').width();
  $('.slide').width(sliderWidth);
  $('.slides').css('transform', `translateX(-${currentSlide * sliderWidth}px)`);
}

$(window).resize(function() {
  resizeSlider();
});

// 初始化时调用一次
resizeSlider();

过渡动画优化

使用CSS3过渡替代jQuery动画获得更流畅效果：

.slides {
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

无限循环改进

改进无限循环效果，避免快速点击时的跳动问题：

function updateSlider() {
  const offset = -currentSlide * 100;
  $('.slides').css({
    'transition': 'transform 0.5s ease',
    'transform': `translateX(${offset}%)`
  });

  // 重置位置时禁用动画
  if(currentSlide >= totalSlides || currentSlide < 0) {
    setTimeout(() => {
      $('.slides').css('transition', 'none');
      currentSlide = (currentSlide + totalSlides) % totalSlides;
      const newOffset = -currentSlide * 100;
      $('.slides').css('transform', `translateX(${newOffset}%)`);
    }, 500);
  }
}

jquery写轮播图