我写了一个 jquery 'lightbox' 风格的函数，但我很难在灯箱 left/right 中创建图像的无缝循环

Question

我写了一些脚本来为我的画廊提供一个灯箱风格的画廊，我希望能够通过我添加的左右 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();

  })



  });

Answer 1

首先，我建议您使用 vs 代码之类的东西，这样您就可以 post 正确对齐代码，这堆乱七八糟的东西真的很难读懂。

以下应该可以解决问题：

$(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();
  });
});

我写了一个 jquery 'lightbox' 风格的函数，但我很难在灯箱 left/right 中创建图像的无缝循环

I wrote a jquery 'lightbox' style function,but am struggling to create seamless loop of images in lightbox left/right

javascript

jquery

image-gallery