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

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは!
今日も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");}

以上です。