0

由于文本上的白色边框以及其他像素化和抖动问题，GIF 图像很难制作动画。因此，尽管缺乏对 IE 上的 PNG 的支持，特别是jQuery 对 PNG的影响，但我还是决定fadeIn这样做会导致黑色边框。fadeOut

我有一个文件夹

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

这是我的 jQuery

$(function()
{
    var i = 0;
    var interval = setInterval(function()
    {
        $('div.m2m_badge a img').attr({ src: '//gc-cdn.com/ui/m2m/' + i + '.png' });
        i++;
        if(i === 38)
            clearInterval(interval);
    }, 250);
});

演示 - http://jsfiddle.net/tXvuY/13/

4

1 回答 1

1 
$(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
});

这是一个演示

最后的工作

要有一个连续的循环，只需i=1;在interval if

$(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); 
});
于 2012-09-26T10:34:36.923 回答