jQueryとsetIntervalで複数のpng画像一定間隔で切替える方法



以前に パラパラアニメを表示させるJQUERY を紹介しましたが、
今回はjQueryとsetIntervalを使って、複数のpng画像を
一定間隔で切替えるアニメーションをやってみます。

1.読込むJsとJavaScriptの記述例

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var count = setInterval(changeImg, 500);//ミリ秒数
    i = 1;
    function changeImg(){
        $("#idImgchng").children("img").attr("src","i" + i + ".png");
        if(i <= 3){	//4枚の画像を切替
            i++;
        }else{
            i = 1;
        }
    }
});
</script>

2.HTMLの記述例

    <div id="idImgchng">
    <img src="i1.png" width="200" height="200">
    </div>

jQueryとsetIntervalで複数のpng画像一定間隔で切替えるアニメーションデモページ

アニメーションgifで良いんじゃないだろうかって
思うことがよくあります。