悬停时循环播放图像

Question

我有这样的事情：

<a href="/url_to_gallery_1"><img src="image_1.jpg" data-alt-src="image_2.jpg;image_3.jpg;image_4.jpg" class="img-loop"></a>
<a href="/url_to_gallery_2"><img src="image_A.jpg" data-alt-src="image_B.jpg;image_C.jpg" class="img-loop"></a>

我希望图像在悬停时改变，并循环遍历所有替代图像，大约每秒改变一次。我希望它在最后重新开始一次，原始图像应该在悬停后返回。
基本上，是这样的：
Img 1 --> 开始悬停 --> Img 2, 3, 4, 1, 2...（每次更改之间都有暂停）--> 结束悬停 --> Img 1

（我简化了例子，但实际的URL不会是顺序的。我也不知道data-alt-src中会有多少张图片，甚至可能没有。）

到目前为止，我有这个：

$('img.img-loop')
.mouseover(function() {
    $(this).data('old-src', $(this).attr('src'));
    var alt_src = $(this).data('alt-src').split(';');

    var i;
    for (i = 0; i < alt_src.length; i++) {
        $(this).attr('src', alt_src[i]);
    }
})
.mouseout(function() {
    $(this).attr('src', $(this).data('old-src'));
});

我被图像之间的延迟所困扰。我尝试过使用 setInterval 和 setTimeout，但到目前为止没有成功。

我还应该提到，我实际上不想要任何类型的预加载（会有几个画廊链接，所以每个画廊的每个预览图像......这会很多）。

Answer 1

您可以使用interval...
像这样：

var myInterval;  // Declare it on global scope.

$('img.img-loop')
    .mouseover(function() {
    $(this).data('old-src', $(this).attr('src'));
    var alt_src = $(this).data('alt-src').split(';');

    /*  Removed this part...
        var i;
        for (i = 0; i < alt_src.length; i++) {
            $(this).attr('src', alt_src[i]);
        }
        */
    var that = $(this);
    var i=0;
    myInterval = setInterval(function(){  // Set an interval
        if(i==alt_src.length){
            i=0;
            that.attr("src", that.data('old-src'));
        }else{
            that.attr('src', alt_src[i]);
            i++;
        }
    },800);  // Interval delay in millisecs.
})
    .mouseout(function() {
    clearInterval(myInterval);  // Clear the interval
    $(this).attr('src', $(this).data('old-src'));
});

img{
    width:150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="/url_to_gallery_1"><img src="http://www.psdgraphics.com/file/red-number-1.jpg" data-alt-src="http://www.psdgraphics.com/file/red-number-2.jpg;
    http://www.psdgraphics.com/file/red-number-3.jpg;
    http://www.psdgraphics.com/file/red-number-4.jpg" class="img-loop"></a>
<a href="/url_to_gallery_2"><img src="http://pix.iemoji.com/images/emoji/apple/ios-9/256/negative-squared-latin-capital-letter-a.png" data-alt-src="http://downloadicons.net/sites/default/files/latin-capital-letter-b-icon-52996.png;
    http://downloadicons.net/sites/default/files/capital-letter-c-icon-52997.png" class="img-loop"></a>

Answer 2

这是实现它的建议方法：

var alt_val, elem, i, timeout;

$('input.img-loop')
  .mouseenter(function() {
    $(this).data('old-val', this.value);
    elem = this;
    alt_val = $(this).data('alt-val').split(';');
    i = 0;
    timeout = setTimeout(loop, 500);
  })
  .mouseout(function() {
    clearTimeout(timeout);
    this.value = $(this).data('old-val');
  });
  
function loop() {
  if (i === alt_val.length) {
    elem.value = $(elem).data('old-val');
    i = 0;
  } else {
    elem.value = alt_val[i++];
  }
  timeout = setTimeout(loop, 500);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="/url_to_gallery_1"><input value="image_1.jpg" data-alt-val="image_2.jpg;image_3.jpg;image_4.jpg" class="img-loop"></a>
<a href="/url_to_gallery_2"><input value="image_A.jpg" data-alt-val="image_B.jpg;image_C.jpg" class="img-loop"></a>

为了在此处不使用图像进行说明，我将任何<img> 替换为<input>，因此src 变为value。

请注意，幸运的是，我们不需要为每个系列提供大量不同的数据（alt_val、elem、i 和 timeout），因为根据您的要求（鼠标悬停时停止)，它们永远不会同时工作。

唯一值得注意的一点是：使用mouseenter 而不是mouseover 来消除任何副作用。