jQuery图片轮播控件循环切换功能实现求助

嘿，我懂你现在的困扰——当前轮播到第4张图时点击next就卡住了，没法回到第一张对吧？咱们来快速修改代码搞定这个循环切换的需求，其实只需要给next和prev的点击事件加个“兜底”逻辑就行。

问题分析 #

你当前的代码里，当currentImg.next()找不到下一张图片时（也就是处于最后一张时），nextImg.length会变成0，导致后续的切换代码完全不执行。同理，在第一张点击prev时也会出现同样的“卡住”问题。我们要做的就是：

• 当在最后一张点击next时，直接切换到第一张图片
• 当在第一张点击prev时，直接切换到最后一张图片

修改后的JavaScript代码 #

$(document).ready(function(){
  $('.next').on('click', function(){
    var currentImg = $('.active');
    var nextImg = currentImg.next();
    
    // 如果没有下一张，就切换到第一张
    if(!nextImg.length){
      nextImg = $('.img-wrapper img:first');
    }
    
    currentImg.removeClass('active').css('z-index', -10);
    nextImg.addClass('active').css('z-index', 10);
  });
  
  $('.prev').on('click', function(){
    var currentImg = $('.active');
    var prevImg = currentImg.prev();
    
    // 如果没有上一张，就切换到最后一张
    if(!prevImg.length){
      prevImg = $('.img-wrapper img:last');
    }
    
    currentImg.removeClass('active').css('z-index', -10);
    prevImg.addClass('active').css('z-index', 10);
  });
});

改动说明 #

• 针对next按钮：新增if(!nextImg.length)判断，当找不到下一张图片时，把nextImg赋值为图片容器里的第一张图（用img:first选择器定位）
• 针对prev按钮：同理，新增if(!prevImg.length)判断，当找不到上一张图片时，把prevImg赋值为图片容器里的最后一张图（用img:last选择器定位）
• 移除了原代码里的if(nextImg.length)包裹逻辑，因为现在不管有没有“相邻”的图片，我们都能拿到有效的目标图片，直接执行切换操作即可

你的CSS和HTML代码完全不需要改动，保持原样就能实现循环轮播的效果啦。

内容的提问来源于stack exchange，提问作者Matija