jQuery将选定的PNG组合到一个图像时间轴动画中

由于文本上的白色边框以及其他像素化和抖动问题，GIF图像很难实现动画效果。所以我决定，尽管IE上缺乏对PNG的支持，尤其是

fadeIn

或

fadeOut

jQuery对PNG的影响导致了黑边框的出现

我有一个像这样的文件夹

/cdn.com/ui/photo/1.png
/cdn.com/ui/photo/2.png
/cdn.com/ui/photo/3.png

这是我的HTML代码，是否有办法添加延迟或以某种方式循环并更改1-38的源代码，并继续循环-甚至可以自定义延迟？我只是想让它像满负荷的gif一样平滑地循环

<div class="m2m_badge">
    <a href="#"><img src="///cdn.com/ui/photo/1.png"/></a>
</div>

演示-

这里有一个

最终工作 要有一个连续循环，只需添加

i=1

$(function()
{
    var i = 1;
    var interval = setInterval(function()
    {
        $('img').attr({ src: 'http://www.gc-cdn.com/ui/m2m/' + i + '.png' });
        i++;
        if(i === 38)
            i=1; // SOLUTION
    }, 250); 
});   

---

---

我是否可以防止它在循环中闪烁最后一个图像并再次启动-使其看起来保持不变。。像这里一样-不要只发布一段代码，请解释为什么这段代码解决了这个问题。如果没有解释，这不是答案。谢谢，不完全是。我只想让它在1-38之间平稳循环而不闪烁。。。之后就停止了38@TheBlackBenzKid是的，当我从答案中删除数组时，我忘了更改它。但它updated@TheBlackBenzKid如果用户第一次访问页面时图像会闪烁，我建议您预加载它们：只是一个提示

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

$(function()
{
    var i = 1;
    var interval = setInterval(function()
    {
        $('img').attr({ src: 'http://www.gc-cdn.com/ui/m2m/' + i + '.png' });
        i++;
        if(i === 38)
            i=1; // SOLUTION
    }, 250); 
});