0

带着极大的挫败感，我设法让我的代码几乎可以工作。我想为透明 png 图像列表设置动画。让它看起来和工作起来像 GIF。

我有 36 张图片。

1.png
2.png
3.png
..
36.png

但是由于某种原因，我的代码在“5.png”处崩溃了——我添加了代码并将其设置为 1500 毫秒，这样您就可以看到 Firebug 或发生了什么。图像存在。

jQuery

// M2M Badge
$(function () {
    var i = 1;
    var interval = setInterval(function () {
        $('div.m2m_badge a img').attr({
            src: '//gc-cdn.com/ui/m2m/m/' + i + '.png'
        });
        i++;
        if (i === 36) i = 1; //38 images has been shown, stop the interval
    }, 1500); //50ms between each swap
});

jsfiddle

http://jsfiddle.net/VWyn9/8/

4

1 回答 1

3

您的代码有效，但我建议不要使用 36 个图像，因为它可能会加载缓慢。

一个不错的选择是有一个 sprite 文件（一个包含所有这些图像的文件）。然后，您可以将其设置为 div 的背景图像，并在每次迭代中更改背景位置以仅显示动画的一帧。

这样，您将只加载一张图片（这将比加载 36 张图片快 18 倍），而且它肯定适用于每一个环境。

于 2012-11-06T10:16:53.707 回答