javascript - 单击时应将缩略图图像与当前图像交换

Question

我有代码笔链接 https://codepen.io/robgolbeck/pen/bVGmop这与我想要的非常相似。我唯一想要的是，在点击拇指图像时，大图像应该被点击的拇指图像替换，并且它不应该出现在拇指列表中。总共只有 5 张图像应该轮换出现，而这里有 6( 5+ 1 在大拇指中重复)。我试图调整 JS，但它没有按预期工作。谁能帮忙。从早上开始就被这个问题困扰。提前致谢。

JS

$('#thumbs img').click(function(){
  $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
  $(this).attr('src',$('#largeImage').attr('src').replace('large','thumb'));
});

Answer 1

在#thumbs img 的点击处理事件中，您可以先显示所有图片，然后隐藏当前图片。首先，您可以点击第一张图片。

$('#thumbs img').click(function(){
  $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
  $('#description').html($(this).attr('alt'));
  $('#thumbs img').show();
  $(this).hide();
});
$('#thumbs img').first().trigger('click');