jQuery 一定間隔で画像を切り替えるアニメーションの作り方 – setInterval replace image animate

どうもこんばんは！
今日もjQueryのネタです。

一定間隔で画像を切り替えるアニメーション

・HTMLの記述

<div id="animateField">
<img src="/images/abcd1.png">
</div>

・JSの記述

$(function(){
    var count = setInterval(changeImg, 2000);//2秒間隔
    i = 1;
    function changeImg(){
        $("#animateField").children("img").attr("src","/images/abcd" + i + ".png");
        if(i <= 5){//6枚の画像を順に切り替え
            i++;
        }
        else{
            i = 1;
        }
    }
});

概要

setIntervalを使って一定間隔ごとに
abcd1.png > abcd2.png > abcd3.png > abcd4.png…
のように画像のsrcをattrで切り替えています。

簡単な内容ですがanimateと組み合わせると
地味に使えます。

いろいろいじってみてくださいね♪

DEMO

attrでの画像切り替えは、読み込みのタイムラグが若干生じます。
デモではこれを解決する為に
背景画像のpositionを減算していく形をとりました。

・JSの記述

$(function(){
    var count = setInterval(changeImg, 2000);
    i = 0;
    function changeImg(){
        $("#animateField").children("p").css("background-position", -120*i + "px");
        if(i <= 6){
            i++;
        }
        else{
            i = 1;
        }
    }
});

・CSSの記述

p {height:120px; width:120px; background-image:url("/images/abcd_all.png");}

以上です。