Question

我正在尝试在用户悬停图片时创建视频预览（例如youtube）。

图像来自FFmpeg，每100帧获取一帧，并保存在第一个加载图像的同一目录中，例如：20-1.jpg。当用户将鼠标放在第一个图像上时，它应该循环显示其他图像，例如：20-2.jpg，20-3.jpg，20,4.jpg等。

HTML

从Twig {{result.id}}

获取该项目的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>

JS

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);
       });
   }

问题在于，当我将鼠标悬停在第一张图像上时，它会按预期工作并循环播放。但是，当我将鼠标悬停在第二张图像或其他图像上时，它会显示所有图像周期，因此它仅适用于一张图像。

Answer 1

假设您有两张ID为20和30的图片，而不是这样：

＆＃13;

var cycle = function(el) {
    var s = el.attr('src');
    var root = s.substring(0, s.lastIndexOf('-') + 1);
    var count = s.substring(s.lastIndexOf('-') + 1).replace('.jpg', '');
    count = (count*1+1)%5;
    console.log(count);
    console.log('-------');
    el.attr('src', root + ((count === 0) ? '5' : count) + '.jpg');
};
$('body').on('mouseenter', '[id^=imgPreview-]', function(e) {
    var thisImage = $(this);
    var timer;
    cycle(thisImage);
    timer = setInterval(function() {
        cycle(thisImage);
    }, 800);
    thisImage.on('mouseleave', function() {
        clearInterval(timer);
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="imgPreview-20" src="/uploads/photos/20-1.jpg" />
<img id="imgPreview-30" src="/uploads/photos/30-1.jpg" />

＆＃13;

同样在JSFiddle。

除了我在评论中提到的所有其他问题外，您始终使用ID 2在此行中生成图像源：

el.attr('src', root + '2-' + ((count===0) ? '5' : count) + '.jpg');

图像悬停时jQuery视频帧预览

1 个答案: