ここから本文です

jQueryで、背景画像の切り替えを実装したいです。 div #cover に設定してある b...

sky********さん

2013/3/1200:22:22

jQueryで、背景画像の切り替えを実装したいです。

div #cover に設定してある background-image を時間ごとにフェードアウトフェードインで切り替えるようなものをjQueryで実装しようと考えています。

JSに疎いもので、サンプルを探していましたがいいものが見当たらず質問させていただきました。

仕様としては、
<div id="cover">・・・</div> で#cover { background-image: aa.jpg; } となっているものを、
指定の時間ごとに、透明度を上げてから次に別の bb.jpg を透明度を下げながら(フェードイン)background-imageに設定されるようにしたいです。

また、aa.jpg -> bb.jpg -> cc.jpg -> aa.jpg のようなループにしたいです。

どなたかご教授いただければと思います<m(__)m>

閲覧数:
8,669
回答数:
1
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

zpp********さん

2013/3/1202:35:42

WEB上にある数多くのソースで満足できるものがなければ
知恵袋に曖昧な説明で質問して気に入るものが見つかるか不明ですが・・・。

まず、div#coverが「・・・」ってなっているということは
div#coverにコンテンツが入るわけですよね?
背景そのものをフェードイン・フェードアウトはできません。
div#cover自体をフェードイン・フェードアウトさせてしまうと
コンテンツ自体もフェードインアウトしてしまいます。

こういう場合は擬似的な背景を実装することが多いです。

<div id="wrap">
<div id="bgimg"></div>
<div id="cover">・・・</div>
</div>
などとして、div#bgimgには背景画像だけ設定します。

擬似背景の環境を作る為に
div#wrapにposition:relative;
div#coverにposition:relative;
div#bgimgにposition:absolute;
と位置指定をして(z-indexを効かせるため)、
div#coverはz-index:2;
div#bgimgはz-index:1;
などとしてdiv#bgimgを背面になるように設定します。
これだけだとdiv#bgimgの範囲が不明なので、
div#wrapにwidth:800px;height:400px;などと範囲指定をして、
div#bgimgをwidth:100%;height:100%としてdiv#wrap全体に効くようにします。

あとは定期的にdiv#bgimgをフェードイン・フェードアウトさせて
同時に背景画像を変更すればいいだけですね。

// CSS部
<style type="text/css"><!--
div#wrap{position:relative;width:800px;height:400px;}
div#cover{position:relative;z-index:2;}
div#bgimg{background-image:url(aa.jpg);position:absolute;z-index:1;width:100%;height:100%;}
--></style>

// JavaScript部
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript"><!--
var speed = 3000; // フェードイン・フェードアウトの処理時間(1000で1秒)
var times = 5000; // 画像切り替えの間隔(1000で1秒)
var bgimages = [
'aa.jpg',
'bb.jpg',
'cc.jpg' // 最後に,をつけない
];
$(function(){
// 現在の背景画像番号格納する変数
var thisnum = 0;
// 定期的に実行
setInterval(function(){
// 背景をフェードアウト
$("#bgimg").fadeOut(speed,function(){
// 背景画像番号変更
thisnum = thisnum === bgimages.length - 1 ? 0 : thisnum + 1;
// 背景画像を変更しフェードイン
$(this).css("background-image","url("+bgimages[thisnum]+")").fadeIn(speed);
});
}, times);
});
--></script>

// HTML部
<div id="wrap">
<div id="bgimg"></div>
<div id="cover">
あいうえおかきくけこ
</div>
</div>

基本はこんな感じだと思うので
後は好みとか調整で弄るだけです。

質問した人からのコメント

2013/3/12 09:02:53

ありがとうございます!divは背景画像を表示するためのものでdivの中身はほぼなにもない状態です。このやり方を参考に自分で試してみたいと思います♪ありがとうございました!

あわせて知りたい

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる