動きのあるサイトを作りたいとのことで、背景の画像を一定感覚で切り替えたいとのこと。
イメージとしてはgif動画を背景に指定するような感じになるが、今回動かすのはgifではなくpngやjpgになりそうとのことだったためjqueryで一定間隔で画像を切り替えることになった。
仕組み
一定間隔でスクリプトが動作し、動作のたびに対象にCSSのクラスを追加する。
切り替え画像を全て表示し終えたら追加したクラスを除去して初期状態へ戻る。
コード
.a_back{
background-image: url(abc/a.png);
}
.b_back{
background-image: url(abc/b.png);
}
.c_back{
background-image: url(abc/c.png);
}$(function(){
var i=0;
setInterval(function(){
//3枚切り替え
if (i === 0){
$('.backimage').removeClass('b_back');
$('.backimage').removeClass('c_back');
i++
}else if(i === 1){
$('.backimage').addClass('b_back');
i++
}else{
$('.backimage').addClass('c_back');
i = 0;
}
},1000);
});<div class="backimage a_back">
本文とか何らかの要素
</div>setIntrval()を使うことによって一定時間ごとにスクリプトが実行される（今回は1000=1秒）
あとはif文と変数iにより、初期状態はa_backのみ、次にb_back、最後にc_backのクラスが追加される。（c_backが追加されたときにカウンタの変数iが0にリセットされる。リセット後はb_backとc_backの除去が実行されてて初期状態へ戻る）
手間をかけたくなかったのでなるべく簡単に。背景画像の指定クラスは優先度が同じでない場合 うまく動作しなくなるので、優先度を揃えるか難しければimportant指定などの工夫が必要。