Question

我想制作我的徽标静态.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'" />

Answer 1

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

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

Answer 2

您可以创建图像源阵列并使用它们。

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

多个图像onmouseover，一个接一个。

2 个答案:

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