我需要创建一个动画与javascript (模仿gif)与jpgs

Question

我有一堆来自旧的flash动画的jpeg。它们的命名顺序是从1000.jpg到1092.jpg。我试着用这些图片创建一个.gif动画，但是gif太大了，质量也很差。

这就是为什么我尝试使用jQuery来动画这些jpegs来模仿这个gif动画。

这是我在stackoverflow上找到的代码

$("#logo").click(function() {
var $logo = $(this), src = $logo.attr("src");
var index = src.indexOf('.jpg');
var step = +src.slice(index-4, index);

function frame() {
    step++;
    if(step < 93) {
        var newSrc = src.slice(0, index-4) + step + ".jpg";
        console.log(newSrc);
        $logo.attr('src', newSrc);
        setTimeout(frame, 50);
    }
}

frame();
});

但它不起作用。动画时间是0.03秒，我的图片是"img id=“徽标”src=“src=”/1000.jpg“/”(肯定是用<> )，但它不工作，也不能更改源文件。

有什么帮助吗？谢谢

编辑:请再次帮助我，因为这让我发疯。我尝试了精灵的东西，但它不起作用，因为你可以看到褪色如何背景被移动。

我真的只需要模仿那个gif，它只是一个由93张照片组成的简单gif。这只是一个动画，一张脸变成了另一张脸。

Answer 1

/*
You are trying to set the `src` of a `div`. Set the `src` of an `img` instead:

<div>
  <img id="logo" src="mypath/mylittlepony.jpg">
</div>
*/
this doesn't apply anymore since the question was edited...

现在this JSFiddle可以像你想要的那样工作了，至少在我的浏览器(Firefox4.0.1)中是这样。

编辑

加载后启动:查看this JSFiddle

加载后启动和无限循环:查看this final JSFiddle

额外的花招：back and forth

您仍然有缓存方面的问题。只有当所有图像都被缓存时，动画才是流动的。您可以通过将它们作为1-px-imgs放在您的页面上来预加载它们。

<img src="http://iflorian.com/test/image/1000.jpg" height="1" width="1" alt="" />
<img src="http://iflorian.com/test/image/1001.jpg" height="1" width="1" alt="" />
<img src="http://iflorian.com/test/image/1002.jpg" height="1" width="1" alt="" />
...
<img src="http://iflorian.com/test/image/1050.jpg" height="1" width="1" alt="" />

当然，您可以通过JQuery完成此操作，但您可以简单地保存一个图像对象数组，这些对象将替换计时器函数中的原始图像。

Answer 2

如果Javascript引发了任何错误，只需检查Web浏览器的错误控制台...因为如果JS的任何部分引发异常并无法运行，那么效果也可能失败。发生在我身上的事。