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>

我希望图像在悬停时更改，并循环浏览所有替代图像，每隔一秒左右更改一次。我想让它在最后再次开始，原始图像应该在悬停后回来。
基本上，这样的事情：
图1 - ＆gt;开始悬停 - ＆gt;图2,3,4,1,2 ......（每次更改之间有暂停） - ＆gt;结束悬停 - ＆gt; Img 1

（我简化了例子，但实际的URL不会按顺序排列。我也不知道data-alt-src中会有多少图像，甚至可能没有。）< / p>

到目前为止，我有这个：

$('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 ...来执行此操作像这样：

＆＃13;

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

＆＃13;

img{
    width:150px;
}

＆＃13;

<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>

＆＃13;

Answer 2

以下是实现它的建议方法：

＆＃13;

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

＆＃13;

<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>

＆＃13;

为了在不使用图片的情况下对其进行说明，我将<img>替换为<input>，因此src变为value。

请注意，幸运的是，我们不需要为每个系列提供大量不同的数据（alt_val，elem，i和timeout）因为，由于你的要求（鼠标停止时停止），他们不会同时工作。

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

在悬停时循环显示图像

2 个答案: