Javascript jQuery图像悬停时的视频帧预览

我试图在用户将图像悬停（如youtube）时创建视频预览

图像取自FFmpeg，每100帧获取一帧，并保存在名为eg:

20-1.jpg的第一个加载图像的同一目录中。
当用户将鼠标放在第一个图像上时，它应该在其他图像中循环，例如：
20-2.jpg
、
20-3.jpg
、
20,4.jpg
等

HTML

从
Twig
{{result.ID}}

<div class="card result-card" onmouseover="updateThumb({{ result.id }})">
    <a href="{{ url('vedi_oggetto',  {'category': catName,'item': result.id,'title': slug}) }}">
        <img class="card-img-top img-fluid" id="imgPreview-{{ result.id }}" src="/uploads/photos/{{ result.id }}-1.jpg" alt="Card image cap">
    </a>
</div>

问题是，当我停留在第一个图像上时，它会正常工作并按预期循环。但是，当我将鼠标悬停在第二个图像或其他图像上时，它会在所有图像上显示第一个图像周期，因此它仅适用于一个图像。
假设您有两个ID为20和30的图像，您可以这样做：


var循环=功能（el）{
var s=el.attr（'src'）；
var root=s.substring（0，s.lastIndexOf（'-'）+1）；
var count=s.substring（s.lastIndexOf（'-'）+1）。替换（'.jpg'，''）；
计数=（计数*1+1）%5；
控制台日志（计数）；
console.log（'----'）；
el.attr（'src'，root+（（count==0）？'5'：count）+'.jpg'）；
};
$（'body'）。关于（'mouseenter'，'id^=imgPreview-]'，函数（e）{
var thisImage=$（此）；
无功定时器；
循环（此图像）；
计时器=设置间隔（函数（）{
循环（此图像）；
}, 800);
thisImage.on（'mouseleave'，function（）{
清除间隔（计时器）；
});
});

在每个
鼠标上方
分配另一个
$（'#imgPreview-'+id）。悬停（function（）{..}）
事件，这是错误的配对：）此外，最好使用
鼠标指针
和
鼠标移动
事件，因为。。。你可能会失去图像悬停。。。并尝试在替换image
src
属性之前预加载图像。好运气，谢谢你的想法，有可能在回复中发布一个例子吗？谢谢你，伙计，你让我开心！现在我明白了为什么我只得到了2-*.jpg文件，该死！
function updateThumb(id) {
   var timer,
       count = 1,
       cycle = function(el){
           var s = el.attr('src'),
           root = s.substring( 0, s.lastIndexOf('/') + 1 );
           count = (count+1)%5;
           el.attr('src', root + '2-' + ((count===0) ? '5' : count) + '.jpg');
       };
       $('#imgPreview-' + id).hover(function(){
           var $this = $(this);
           cycle($this);
           timer = setInterval(function(){ cycle($this); }, 800);
       }, function(){
           clearInterval(timer);
       });
   }