在Array onClick中显示下一个图像

我正在设置可以通过屏幕箭头点击的图像。 目前我通过循环和数组显示所有图像。 我已经能够设置它，以便当您将鼠标hover在小图像预览上时，主图像将更改为该图像。 阿卡，你可以将它们hover在它们上面以查看更大的版本。

我的数组是在mongo模型中： Listings.currentimages

我下面的当前代码用于获取一个小图像，以便在hover时接管特色图像。 如何更改我的代码以使用屏幕左/右箭头？

  > 
 <% for(var i = 0; i  
  "> 
   

hoverfunction：

 $('.small').hover(function() { $('.small').removeClass('selectedImage') var src = $(this).attr('src'); $(this).addClass('selectedImage') $('#mainPicture').attr('src', src); }); 

Answer 1

假设您有两个图标（next / prev），您可以定义以下两个事件处理程序，以便向右或向左移动：

 $('#nextArrow').on('click', function(e) { var anchestor = $('.small.selectedImage').closest('.smallerImages'); var nextImg = $('#allimages .smallerImages:first .small'); if (anchestor.next().length != 0) { nextImg = anchestor.next().find('.small'); } $('.small').removeClass('selectedImage'); var src = nextImg.attr('src'); nextImg.addClass('selectedImage'); $('#mainPicture').attr('src', src); }) $('#prevtArrow').on('click', function(e) { var anchestor = $('.small.selectedImage').closest('.smallerImages'); var nextImg = $('#allimages .smallerImages:last .small'); if (anchestor.prev().length != 0) { nextImg = anchestor.prev().find('.small'); } $('.small').removeClass('selectedImage'); var src = nextImg.attr('src'); nextImg.addClass('selectedImage'); $('#mainPicture').attr('src', src); }) 

Answer 2

我创建了一些代码来做你想做的事。 基本上，您必须保留当前显示图像的索引，然后使用该索引显示正确的图像。

我创建了一个虚构的扩展图像列表。 你可以丢弃它。