Jquery 单击图像src更改图像src->；从以下缩略图复制到src

我正在尝试通过单击主/单个图像，将图像

src

切换到下一个缩略图中的

src

<div id="productinfoleft">
  <img src="images/product_images/info_images/some_image_0.png" class="productimage">
  <div class="morepics">
    <div class="active">
      <img src="images/product_images/thumbnail_images/some_image_0.png">
    </div>
    <div>
      <img src="images/product_images/thumbnail_images/some_image_1.png">
    </div>
    <div>
      <img src="images/product_images/thumbnail_images/some_image_2.png">
    </div>
    <div>
      <img src="images/product_images/thumbnail_images/some_image_3.png">
    </div>
  </div>
</div>

通过点击缩略图，我已经可以交换主图像-到目前为止还不错。但在点击主图像时，我想将图像更改为以下缩略图池的下一个文件。我现在使用的jQuery代码是：

// BOF PRODUCT-MORE-PICTURE CLICK SWAP
$('.morepics div:first').addClass('active');

$(document).ready(function(e) {
  $('.morepics img').click(function(e) {
    e.preventDefault();
    $('.morepics div').removeClass('active');
    $('.productimage').attr('src', $(this).attr('src').replace('thumbnail_images/', 'info_images/'));
      $(this).parent('div').addClass('active');
    });

    var imgSwap = [];
    $('.morepics img').each(function() {
      imgUrl = this.src.replace('thumbnail_images/', 'info_images/');
      imgSwap.push(imgUrl);
    });
    $(imgSwap).preload();
  });

  $.fn.preload = function() {
    this.each(function(){
      $('<img/>')[0].src = this;
    });
  }

  // EOF PRODUCT-MORE-PICTURE CLICK SWAP

//BOF产品-更多图片单击交换
$（'.morepics div:first'）.addClass（'active'）；
$（文档）.ready（函数（e）{
$（'.morepics img'）。单击（函数（e）{
e、 预防默认值（）；
$（'.morepics div'）.removeClass（'active'）；
$（'.productimage'）.attr（'src'，$（this.attr（'src'））.replace（'thumbnail_images/'，'info_images/'））；
$（this）.parent（'div'）.addClass（'active'）；
});
var imgSwap=[]；
$（'.morepics img'）。每个（函数（）{
imgUrl=this.src.replace（'thumbnail\u images/'，'info\u images/'）；
imgSwap.push（imgUrl）；
});
$（imgSwap.preload（）；
});
$.fn.preload=函数（）{
这个。每个（函数（）{
$('
我不知道如何更改或扩展我的jQuery代码来完成这项工作，同时将缩略图div的类更改为
活动的
。任何帮助都会非常好-谢谢。
因为您已经具备了单击实际缩略图和更新主图像的功能，我只想在mai上添加一些代码n触发单击下一个缩略图的图像（使用已应用的
active
类）

添加以下内容就可以了

/*单击productimage时加载下一个图像*/
$（'.productimage'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var thumbs=$（'.morepics>div'），//获取缩略图的所有包装div
active=thumbs.filter（'.active'），//获取活动div
next=active.next（）；//获取激活后的下一个div
如果（！next.length）{//如果活动是最后一个，那么不存在下一个，请从第一个开始
next=thumbs.first（）；
}
next.find（'img'）.trigger（'click'）；//触发img的现有处理程序
});
由于您已经具备了单击实际缩略图和更新主图像的功能，我只需在主图像上添加一些代码，以触发单击下一个缩略图（使用已应用的
活动类）

添加以下内容就可以了

/*单击productimage时加载下一个图像*/
$（'.productimage'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var thumbs=$（'.morepics>div'），//获取缩略图的所有包装div
active=thumbs.filter（'.active'），//获取活动div
next=active.next（）；//获取激活后的下一个div
如果（！next.length）{//如果活动是最后一个，那么不存在下一个，请从第一个开始
next=thumbs.first（）；
}
next.find（'img'）.trigger（'click'）；//触发img的现有处理程序
});
谢谢“加比·阿卡·佩特里奥利”-你让我开心！！！这正是我所需要的。注意：首先，它不能像
那样工作（'click'，function…
未被识别。我注意到我最后需要jQuery V 1.7才能工作。接下来，我将尝试添加一些fadeIn fadeOut动画。@bacelo对此表示抱歉。我总是假设人们使用最新版本或更高版本。可能对这种情况下的其他人也有帮助：关于src更改上的淡入过渡，我将
$（'.productimage'）.attr（'src'，$（this）.attr（'src'）.replace（'thumbnail_-images/'，'info_-images/'）
更改为以下
$（'productimage'）.attr（'src'，$（this）.attr（'src'）.replace（'thumbnail_-images/'，'info_-images/'））.stop（真的，真的）。hide（）.fadeIn（'slow”）
谢谢你“Gaby aka G.Petrioli”-你成就了我的一天！！！这正是我所需要的。注意：首先，它不能像上的
那样工作（'click'，function…
未被识别。我注意到我最后需要jQuery V 1.7才能工作。接下来，我将尝试添加一些fadeIn fadeOut动画。@bacelo对此表示抱歉。我总是假设人们使用最新版本或更高版本。可能对这种情况下的其他人也有帮助：关于src更改上的淡入过渡，我将
$（'.productimage'）.attr（'src'，$（this）.attr（'src'）.replace（'thumbnail_images/'，'info_images/'）
更改为以下
$（'productimage'）.attr（'src'，$（this）.attr（'src'）.replace（'thumbnail_images/'，'info_images/'））.stop（true，true）。hide（）.fadeIn（'slow）