如何让jQuery滑块点击next/prev时实现首尾自动循环跳转功能

AI 小北

2026-9-28

修复后的循环滑块实现

原有代码问题说明

prev点击事件中未定义active变量，导致逻辑判断失效
选择器错误：使用#slide（ID选择器）匹配class="slide"的元素，应该改用.slide类选择器
首尾跳转的else分支中，只给目标元素加了active类，未移除原有激活元素的active类，导致同时存在两个激活元素
类操作顺序不合理：先给新元素加激活类再移除旧类，会出现瞬间两个元素同时激活的异常状态

修复后的完整JS代码

$(document).ready(function(){
  // next按钮逻辑
  $('.next').click(function(){
    var active = $('.slide .active');
    // 先移除旧元素的激活状态
    active.removeClass('active');
    // 判断是否存在下一个滑块元素
    if(active.next('div').length > 0) {
      active.next('div').addClass('active');
    } else {
      // 已经到最后一张，跳转回第一张
      $('.slide div:first').addClass('active');
    }
  });

  // prev按钮逻辑
  $('.prev').click(function(){
    var active = $('.slide .active');
    active.removeClass('active');
    // 判断是否存在上一个滑块元素
    if(active.prev('div').length > 0) {
      active.prev('div').addClass('active');
    } else {
      // 已经到第一张，跳转回最后一张
      $('.slide div:last').addClass('active');
    }
  });
});