Jquery/Javascript缩略图图像问题

我有几个缩略图像，它们在html列表标记中间隔5个像素。我还为mouseenter和mouseleave事件提供Jquery侦听器，它们根据滚动的缩略图更新父图像

如果从一个缩略图图像滚动到另一个缩略图图像，则过渡不平滑。当鼠标处于5像素间距时，父图像将快速跳转到其默认值，然后在光标移动到其上时返回到下一个缩略图

如何使其平滑，以便在不跳回默认父图像的情况下从一个图像切换到另一个图像

我试着将间距作为填充，但是设计在图像周围有一个边框，这使得它看起来很糟糕

谢谢

编辑。->代码请求

$image_changer = $('.imageChanger');
$image_changer.each(function(){
$(this).mouseenter(function(){
    $backup_old_image = $('.product-img-box .product-image img').attr('src');
    $('.product-img-box .product-image img').attr('src', $(this).attr('src'));
});
});
$image_changer.mouseleave(function(){
    $('.product-img-box .product-image img').attr('src', $backup_old_image);
});

产品页面上的示例。。

---

使用包装器或将padding和mouseover事件触发器放置在li元素上

<li style="padding:5px">
   <img href="content.png" alt="content">
</li>

编辑 参观网站后：

改变

到

去掉图像上的空白

然后将jQuery更改为

---

我们需要一个示例和/或代码。您介意分享您当前的代码吗？如果没有这些，我们就不知道如何回答这个问题。我不认为代码会有多大帮助，但我希望它有用！是的，我尝试过类似的方法和您的实现，但它似乎无法通过jquery访问映像。滚动现在根本不起作用。我已经在JSFIDLE中尝试过了，但效果很好，我不知道有什么冲突。我甚至尝试过给li项目一个类并访问它，但这也不起作用

$("li").hover(function(){},function(){})

#main-content .more-views ul li {
  float: left;
}

#main-content .more-views ul li {
  padding-right: 5px;
  float: left;
}

$image_changer = jQuery('.more-views li');
$image_changer.each(function(){
jQuery(this).mouseenter(function(){
    $backup_old_image = jQuery('.product-img-box .product-image img').attr('src');
    jQuery('.product-img-box .product-image img').attr('src', jQuery(this).find("img").attr('src'));
});
});
$image_changer.mouseleave(function(){
    jQuery('.product-img-box .product-image img').attr('src', $backup_old_image);
});