当前位置：首页 > jquery

jquery轮播图

2026-01-15 15:54:47jquery

jQuery轮播图实现方法

基础HTML结构

创建一个包含轮播图图片的容器，通常使用无序列表或div嵌套结构：

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

CSS样式设置

为轮播图添加基本样式，确保图片横向排列且只显示当前项：

.slider {
  position: relative;
  overflow: hidden;
  width: 800px;
  height: 400px;
}
.slider-container {
  display: flex;
  width: 300%;
  transition: transform 0.5s ease;
}
.slider-container li {
  width: 33.33%;
}
.slider img {
  width: 100%;
  height: auto;
}

jQuery核心功能

通过jQuery实现自动轮播和手动控制功能：

$(document).ready(function(){
  let currentIndex = 0;
  const slides = $('.slider-container li');
  const slideCount = slides.length;

  // 创建指示点
  for(let i=0; i<slideCount; i++){
    $('.slider-dots').append('<span class="dot"></span>');
  }

  // 自动轮播
  let autoSlide = setInterval(nextSlide, 3000);

  function nextSlide(){
    currentIndex = (currentIndex + 1) % slideCount;
    updateSlider();
  }

  function prevSlide(){
    currentIndex = (currentIndex - 1 + slideCount) % slideCount;
    updateSlider();
  }

  function updateSlider(){
    $('.slider-container').css('transform', `translateX(-${currentIndex*100}%)`);
    $('.dot').removeClass('active').eq(currentIndex).addClass('active');
  }

  // 控制按钮
  $('.next').click(function(){
    clearInterval(autoSlide);
    nextSlide();
    autoSlide = setInterval(nextSlide, 3000);
  });

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

  // 指示点点击
  $('.dot').click(function(){
    clearInterval(autoSlide);
    currentIndex = $(this).index();
    updateSlider();
    autoSlide = setInterval(nextSlide, 3000);
  });

  // 初始状态
  updateSlider();
});

响应式调整

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

$(window).resize(function(){
  $('.slider-container').css('height', $('.slider').height() + 'px');
});

过渡效果增强

可以添加更多动画效果，例如淡入淡出：

function updateSlider(){
  $('.slider-container li').fadeOut(500);
  $('.slider-container li').eq(currentIndex).fadeIn(500);
  $('.dot').removeClass('active').eq(currentIndex).addClass('active');
}