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

您可以使用间隔来执行此操作...
像这样:

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>