当前位置：首页 > jquery

jquery图片轮播

2026-01-16 15:01:17jquery

jQuery图片轮播实现方法

基础HTML结构

创建一个简单的HTML结构，包含轮播容器、图片列表和导航按钮。

<div class="slider">
  <div class="slides">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <button class="prev">Previous</button>
  <button class="next">Next</button>
</div>

CSS样式设置

为轮播组件添加基本样式，确保图片水平排列且每次只显示一张。

.slider {
  position: relative;
  width: 800px;
  height: 400px;
  overflow: hidden;
}

.slides {
  display: flex;
  width: 300%;
  transition: transform 0.5s ease;
}

.slides img {
  width: 800px;
  height: 400px;
  object-fit: cover;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.prev { left: 10px; }
.next { right: 10px; }

jQuery核心功能

使用jQuery实现轮播动画和导航控制。

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

  // 初始化轮播位置
  updateSlidePosition();

  // 下一张按钮事件
  $('.next').click(function(){
    currentIndex = (currentIndex + 1) % totalSlides;
    updateSlidePosition();
  });

  // 上一张按钮事件
  $('.prev').click(function(){
    currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
    updateSlidePosition();
  });

  // 更新幻灯片位置函数
  function updateSlidePosition() {
    const offset = -currentIndex * 100;
    $('.slides').css('transform', `translateX(${offset}%)`);
  }
});

自动轮播功能

添加自动轮播功能，可设置间隔时间。

// 添加在document.ready函数内
let autoSlideInterval = setInterval(() => {
  currentIndex = (currentIndex + 1) % totalSlides;
  updateSlidePosition();
}, 3000);

// 鼠标悬停时暂停轮播
$('.slider').hover(
  function() { clearInterval(autoSlideInterval); },
  function() {
    autoSlideInterval = setInterval(() => {
      currentIndex = (currentIndex + 1) % totalSlides;
      updateSlidePosition();
    }, 3000);
  }
);

指示器添加

创建轮播指示器以便直观显示当前图片位置。

<!-- 在HTML中添加 -->
<div class="indicators"></div>

// 在jQuery中添加指示器功能
function createIndicators() {
  $('.indicators').empty();
  for(let i=0; i<totalSlides; i++) {
    $('.indicators').append(`<span data-index="${i}"></span>`);
  }
  updateActiveIndicator();
}

function updateActiveIndicator() {
  $('.indicators span').removeClass('active')
    .eq(currentIndex).addClass('active');
}

// 点击指示器跳转
$('.indicators').on('click', 'span', function() {
  currentIndex = $(this).data('index');
  updateSlidePosition();
  updateActiveIndicator();
});

// 在updateSlidePosition函数内调用
updateActiveIndicator();

响应式调整

使轮播适应不同屏幕尺寸。

$(window).resize(function() {
  const newWidth = $(window).width() < 800 ? '100%' : '800px';
  $('.slider').css('width', newWidth);
  $('.slides img').css('width', newWidth);
});