Growth Hackで得た知見やWeb制作の備忘録をまとめています。

This is standard

javascript

jQueryで背景画像をフェードイン・フェードアウト

更新日:

jQueryで背景画像をフェードイン・フェードアウトする方法の覚書です。

<script>
var speed = 1000; // フェードイン・フェードアウトの処理時間(1000で1秒)
var times = 5000; // 画像切り替えの間隔(1000で1秒)
var bgimages = [
'a.jpg',
'b.jpg',
'c.jpg' // 最後に,をつけない
];
var position = ['-150px','-100px', '0'];
$(function(){
// 現在の背景画像番号格納する変数
var thisnum = 0;
// 定期的に実行
setInterval(function(){
// 背景をフェードアウト
$(".bg").fadeOut(speed,function(){
// 背景画像番号変更
thisnum = thisnum === bgimages.length - 1 ? 0 : thisnum + 1;
// 背景画像を変更しフェードイン
$(this).css({"background-image":"url("+bgimages[thisnum]+")","background-position":position[thisnum] + " 0"}).fadeIn(speed);

});
}, times);
});
</script>

参考サイトのコードにbackground-positionを追加しています。

参考サイト
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10103591355

-javascript

Copyright© This is standard , 2019 All Rights Reserved Powered by STINGER.