0

テキストの白い境界線やその他のピクセル化やディザリングの問題により、GIF画像ではアニメーションが困難です。fadeInそのため、特にIEでのPNGのサポートがないか、PNGでのfadeOutjQuery効果が原因で黒い境界線がサポートされていないにもかかわらず、私は決定しました。

私は次のようなフォルダを持っています

/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 に答える