需要用javascript(mimic gif)和jpgs创建动画

我有一大堆来自旧flash动画的jpeg。 他们的名字从1000.jpg到1092.jpg按顺序播放。 我尝试用这些图片创建一个.gif动画,但是gif只是很大而且质量太差了。

这就是为什么我尝试使用jQuery动画那些jpeg来模仿这个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 =”logo“src =”images / 1000.jpg“/”(肯定是用)但它是没有工作或改变src。

任何帮助使这项工作? 谢谢

编辑:请再次帮助,因为这让我发疯。 我尝试了精灵的事情,但这不起作用,因为你可以看到淡入淡出背景如何移动。

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

 /* You are trying to set the `src` of a `div`. Set the `src` of an `img` instead: 
*/ this doesn't apply anymore since the question was edited...

现在这个JSFiddle可以按你的需要工作,至少在我的浏览器中是这样的(Firefox 4.0.1)。

编辑
加载后启动:看看这个JSFiddle
在加载和无限循环之后开始:看看这个最终的JSFiddle
额外的噱头: 来回

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

    ...  

当然你可以通过JQuery来做到这一点,但是你可以简单地保存一组图像对象来代替计时器function中的原始图像。

如果Javascript引发任何错误,请检查您的Web浏览器错误控制台…因为如果您的JS的任何部分引发exception并且无法运行,那么效果也可能失败。 偶尔发生在我身上。