jquery 轮播图

使用jQuery实现轮播图

轮播图是网页中常见的交互组件，用于展示多张图片或内容。以下是基于jQuery的轮播图实现方法。

基础HTML结构

创建一个包含图片列表和导航按钮的容器：

<div class="slider">
  <div class="slides">
    <img src="image1.jpg" class="active">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
  <button class="prev">❮</button>
  <button class="next">❯</button>
</div>

核心CSS样式

设置轮播图的布局和过渡效果：

.slider {
  position: relative;
  width: 800px;
  height: 400px;
  overflow: hidden;
}
.slides img {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}
.slides img.active {
  opacity: 1;
}
button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.prev { left: 10px; }
.next { right: 10px; }

jQuery实现逻辑

添加轮播功能和控制逻辑：

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

  // 初始化显示第一张
  slides.eq(currentIndex).addClass('active');

  // 下一张按钮
  $('.next').click(function(){
    slides.eq(currentIndex).removeClass('active');
    currentIndex = (currentIndex + 1) % totalSlides;
    slides.eq(currentIndex).addClass('active');
  });

  // 上一张按钮
  $('.prev').click(function(){
    slides.eq(currentIndex).removeClass('active');
    currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
    slides.eq(currentIndex).addClass('active');
  });

  // 自动轮播（可选）
  setInterval(function(){
    $('.next').trigger('click');
  }, 3000);
});

扩展功能

1. 添加指示器：

   <div class="dots-container"></div>

   
   // 动态生成指示点
   slides.each(function(index){
   $('.dots-container').append(`<span class="dot" data-index="${index}"></span>`);
   });

// 点击指示点跳转 $('.dot').click(function(){ const targetIndex = $(this).data('index'); slides.eq(currentIndex).removeClass('active'); currentIndex = targetIndex; slides.eq(currentIndex).addClass('active'); });

2. 添加过渡动画：
修改CSS实现滑动效果：
```css
.slides img {
  transition: transform 0.5s ease;
  transform: translateX(100%);
}
.slides img.active {
  transform: translateX(0);
}
.slides img.prev {
  transform: translateX(-100%);
}

1. 响应式调整：

   $(window).resize(function(){
   $('.slider').height($('.slider').width() * 0.5);
   });

注意事项

• 图片需要预加载避免闪烁
• 移动端需添加触摸事件支持
• 自动轮播时建议暂停交互
• 考虑无障碍访问特性

通过以上代码组合，可以构建一个功能完整的jQuery轮播图组件。根据实际需求可以进一步扩展动画效果或添加更多控制功能。