Javascript 我写了一个jquery'；灯箱'；样式功能，但我正在努力创建lightbox左/右图像的无缝循环

我写了一些脚本给我的图库一个灯箱样式的图库，我希望能够通过我添加的左、右V形来完成它，所以我添加了这个函数来完成这项工作。但是，虽然我的左函数在库中循环到开始，然后循环到结束，以提供无缝循环的图像，但我的右函数不起作用，它直接进入最终图像，然后将无法继续。有人能提出这是为什么吗？我做错了什么

  var currentImage;

  $(document).ready(function() {


  $('.lightboxBG').hide();

  });


  $(document).ready(function(){


  $('.galleryphoto').click(function()
  {
  var image_href = $(this).attr("src");


  $('.lightboxBG').show();
  $('.lightboxIMG').attr("src",image_href);

  currentImage = image_href;


  });

  var images = $("img.galleryphoto").map(function() {
  return $(this).attr("src");
  });



  var left = $('.fa-chevron-left');
  var right = $('.fa-chevron-right');

  //here is the function which doesn't want to work.
  right.click(function(){

   for(var j = 0; j < images.length; j++){
   if(images[j]=== currentImage){

      if(images[j+1] !== undefined){


      $('.lightboxIMG').attr("src", images[j+1]);
      currentImage = images[j+1];
      }
      else{$('.lightboxIMG').attr("src", images[0]);

  currentImage = images[0];

  }
     }
   }    
  });

    // here is the function which works nicely.
  left.click(function(){

   for(var i = 0; i < images.length; i++){

     if(images[i]=== currentImage){


      if(images[i-1] !== undefined){
          $('.lightboxIMG').attr("src", images[i-1]);
      currentImage = images[i-1];
      }
       else{$('.lightboxIMG').attr("src", images[images.length-1])
          currentImage = images[images.length-1];
   }
     }
   }    
  });



  $('.fa-window-close').click(function(){

  $('.lightboxBG').hide();

  })



  });

var-currentImage；
$（文档）.ready（函数（）{
$（'.lightboxBG'）.hide（）；
});
$（文档）.ready（函数（）{
$（'.galleryphoto'）。单击（函数（）
{
var image_href=$（this.attr（“src”）；
$（'.lightboxBG'）.show（）；
$（'.lightboxIMG'）.attr（“src”，image_href）；
currentImage=image_href；
});
var images=$（“img.galleryphoto”）.map（函数（）{
返回$（this.attr（“src”）；
});
左变量=$（'.fa V形左'）；
右变量=$（'.fa V形右'）；
//这是一个不想工作的函数。
右键。单击（函数（）{
对于（var j=0；j

首先，我建议您使用类似于vs代码的东西，这样您就可以发布正确对齐的代码，这种混乱很难阅读

下面应该可以做到这一点：

$(document).ready(function() {
  var currentIndex;
  const imageUrls = Array.from(
    $("img.galleryphoto").map(function() {
      return $(this).attr("src");
    })
  ),
  next = function(direction){
    currentIndex = currentIndex + direction;
    if(currentIndex>=imageUrls.length){
      currentIndex = 0;
    }
    if(currentIndex<0){
      currentIndex = imageUrls.length-1;
    }
    $('.lightboxIMG').attr("src", imageUrls[currentIndex]);
  };

  $('.lightboxBG').hide();
  //changed this to img.galleryphoto so it's the same as imageUrls
  $('img.galleryphoto').click(function(){
    currentIndex = imageUrls.indexOf($(this).attr("src"));
    $('.lightboxBG').show();
    $('.lightboxIMG').attr("src",imageUrls[currentIndex]);
  });
  //here is the function which doesn't want to work.
  $('.fa-chevron-right').click(function(){
    next(1);
  });

  // here is the function which works nicely.
  $('.fa-chevron-left').click(function(){
    next(-1);
  });

  $('.fa-window-close').click(function(){    
    $('.lightboxBG').hide();
  });
});

$（文档）.ready（函数（）{
var电流指数；
const imageUrls=Array.from(
$（“img.galleryphoto”）.map（函数（）{
返回$（this.attr（“src”）；
})
),
下一步=功能（方向）{
currentIndex=currentIndex+方向；
if（currentIndex>=imageUrls.length）{
currentIndex=0；
}
如果（CurrentIndex感谢您的建议，很抱歉，我将彻底检查您的代码，并尝试重写它，以便将来我可以这样做，我也采纳了您的建议并下载了vs代码，我以前使用的是sublime，我一直在努力将其格式化为stackoverflow。我知道您一直在提供帮助，但您是否看到我的同事de不起作用，我可以告诉你，你的代码更清楚、更中肯，但我真的很确定为什么一段代码会失败，比如我做错了什么？很抱歉，我也在你的代码上抛出了一个类型错误，上面说。indexOf不是一个函数如果你感兴趣，这不起作用，因为
const imageUrls=$（“img.galleryphoto”）。map（function（）{return$（this.attr（“src”）；
正在创建一个对象，indexOf需要一个数组才能工作，所以我使用了
var-imageUrls=array（）；$（'img.galleryphoto'）.each（function（）{imageUrls.push（$（this.attr（'src'））；}）；
现在我们正在工作；）@JamesVitaly更新了答案，jQuery.map返回的对象不是这样添加的数组
数组。从
中，您已经找到了这个对象。@JamesVitaly要回答您关于原始代码有什么问题的问题，请在
右侧。在设置源代码后单击
，并在for循环中设置
currentImage
的值执行一个
中断；
，您已经设置了映像，无需继续循环。如果执行此操作，则每次
images[j]==currentImage
都是真的