多个图像，一个接一个

Multiple images onmouseover, one by one.

本文关键字：一个 图像      更新时间：2023-09-26

我想让我的徽标成为静态的.png图像，但当我把光标放在徽标上时，我想让它播放7张图像的"幻灯片放映"，逐个更改。

我知道我可以用这样的代码来实现这一点：

      <img src="image.png" onmouseover="this.src='image.gif'" onmouseout="this.src='image.png'" />

但我想要这样的东西：

      <img src="image.png" onmouseover="this.src='image1.png/0.1s delay/image2.png/0.1s delay/image3.png/0.1s delay/'" onmouseout="this.src='image.png'" />

你可以做这样的事情，只需要稍微修改一下你的方法。考虑这个代码：

<img src="http://lorempixel.com/100/100/food/1" data-mouseover="http://lorempixel.com/100/100/food/2#500 http://lorempixel.com/100/100/food/3#600 http://lorempixel.com/100/100/food/4#300" />

和这个JS来处理声明的图像源：

$('img').on('mouseover', function() {
    var self = this,
        i = 0,
        images = $(this).data('mouseover').split(/'s+/);
    (function nextImage() {
        var next = images[i++ % images.length].split('#');
        $(self).data('timeout', setTimeout(function() {
            self.src = next[0];
            nextImage();
        }, next[1] || 200));
    })();
}).on('mouseout', function() {
    clearTimeout($(this).data('timeout'));
    this.src = $(this).attr('src');
});

演示：http://jsfiddle.net/e2j1a6vt/

您可以创建图像源数组并使用它们。

var counter = 0, arr = ["image1.png", "image2.png", "image3.png"];
$('img').mouseover(function() {
    $(this).attr('src', function() {
        return arr[counter++];
    })
});
相关文章：