背景画像を1秒ごと変更する

説明

背景画像を1秒ごと変更するにはタイマーを使って定期的に要素のstyleオブジェクトのbackgroundImageプロパティに"url(画像のURL)"の文字列を指定します。なお、画像のURLはHTMLファイルがある場所が基準になります。CSSファイルが基準ではない点には注意してください。

サンプルプログラム

var n = 0;
window.onload = function(){
setInterval(function(){
var ele = document.getElementsByTagName("h1")[0];
n = (n + 1) % 3; // 画像が3枚の場合
ele.style.backgroundImage = "url(./images/"+n+".gif)";
}, 1000);
}
サンプルを実行
[戻る]