轮播图 jquery

轮播图实现方法（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 class="dots-container"></div>
</div>

CSS样式设置

.slider {
  position: relative;
  width: 800px;
  height: 400px;
  overflow: hidden;
}
.slides {
  display: flex;
  width: 300%;
  transition: transform 0.5s ease;
}
.slide {
  width: 33.33%;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 10;
}
.prev { left: 10px; }
.next { right: 10px; }
.dots-container {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
  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');

  // 切换幻灯片函数
  function goToSlide(index) {
    $('.slides').css('transform', 'translateX(-'+(index*33.33)+'%)');
    $('.slide').removeClass('active');
    $('.slide').eq(index).addClass('active');
    $('.dot').removeClass('active');
    $('.dot').eq(index).addClass('active');
    currentIndex = index;
  }

  // 自动轮播设置
  let currentIndex = 0;
  let slideCount = $('.slide').length;
  let autoSlide = setInterval(function() {
    currentIndex = (currentIndex + 1) % slideCount;
    goToSlide(currentIndex);
  }, 3000);

  // 上一张/下一张按钮
  $('.prev').click(function() {
    clearInterval(autoSlide);
    currentIndex = (currentIndex - 1 + slideCount) % slideCount;
    goToSlide(currentIndex);
    autoSlide = setInterval(function() {
      currentIndex = (currentIndex + 1) % slideCount;
      goToSlide(currentIndex);
    }, 3000);
  });

  $('.next').click(function() {
    clearInterval(autoSlide);
    currentIndex = (currentIndex + 1) % slideCount;
    goToSlide(currentIndex);
    autoSlide = setInterval(function() {
      currentIndex = (currentIndex + 1) % slideCount;
      goToSlide(currentIndex);
    }, 3000);
  });

  // 点击导航点切换
  $('.dot').click(function() {
    clearInterval(autoSlide);
    let dotIndex = $(this).data('index');
    goToSlide(dotIndex);
    autoSlide = setInterval(function() {
      currentIndex = (currentIndex + 1) % slideCount;
      goToSlide(currentIndex);
    }, 3000);
  });
});

扩展功能选项

1. 添加淡入淡出效果：将CSS中的transition改为opacity动画，jQuery中使用fadeIn()/fadeOut()
2. 响应式设计：通过媒体查询调整轮播图尺寸
3. 触摸滑动支持：引入hammer.js库添加触摸事件
4. 无限循环优化：克隆首尾幻灯片实现无缝滚动

注意事项

1. 确保在HTML中正确引入jQuery库
2. 图片路径需要根据实际情况调整
3. 轮播间隔时间(3000ms)可根据需求修改
4. 对于大量图片建议添加懒加载功能