[JS]背景画像にスライドやフェードの動きを付与できる「jQuery.BgSwitcher」
スポンサード
もし、上手く背景画像が表示されない場合は、背景画像を表示させる要素に以下のようなCSS を別途指定してみてください。
スポンサード
複数の背景画像をスライドで横に動かしたり、フェードイン、フェードアウトで切り替えたりすることができるjQueryプラグイン「jQuery.BgSwitcher」のご紹介です。
目次
jQuery.BgSwitcher ファイルのダウンロード
以下のページより、jQuery.BgSwitcher のファイルを一式ダウンロードします。jQuery.BgSwitcher の使い方
ダウンロードした jquery.bgswitcher.jsを、jquery ファイルと一緒に設置します。1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./jquery.bgswitcher.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".contents").bgswitcher({ images: [ "./images/image_1.jpg", "./images/image_2.jpg", "./images/image_3.jpg", "./images/image_4.jpg" ], effect: "drop", easing: "swing", loop: true }); }); </script> |
images
に背景画像を複数枚設定します。
あとはeffect
、easing
、loop
などの各エフェクトをサイトに合わせて設定していくのですが、以下のページで jQuery.BgSwitcher で使えるエフェクトを確認することができますので、
実際にスライドさせたりしながら、設定してみましょう。
もし、上手く背景画像が表示されない場合は、背景画像を表示させる要素に以下のようなCSS を別途指定してみてください。
1 2 3 4 5 6 7 | .contents { width:100%;//値はサイトに合わせて min-height:500px;//値はサイトに合わせて position:relative; background-position:50% 0; background-repeat:no-repeat } |
当方のデモページでもjQuery.BgSwitcher を動かしてみましたので、こちらも是非参考にしてみてください。
jQuery.BgSwitcher で背景画像をスライドさせるデモ
スポンサード
コメント