javascript - 悬停时循环浏览图像

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>