背景画像の自動切り換えが出来る jQueryプラグイン「bgswitcher」フェード・スライドの動きも可能

公開日:  最終更新日:2017/03/25

背景画像の自動切り換えが出来る jQueryプラグイン「bgswitcher」フェード・スライドの動きも可能
メインコンテンツとして画像を切り替えことが出来るスライダーをこのブログでもいくつか紹介してきました。省スペースに複数の画像を配置できるネットショップでよく使われているパーツではないでしょうか。

上記がその一部です。メインコンテンツとして動きを付けて複数の画像を見せることが出来るネットショップ等でもよく使われている見せ方だと思います。
本日も、画像を切り替えてくれるjQueryプラグインを紹介しますが、今までのと違うのは「背景画像」を切り替えるという点です。

スポンサードリンク

背景画像をフェード・スライドなどで切り替え出来る「jquery-bgswitcher」

背景画像を自動的に切り替えたいという要望はありそうなのと面白そうだったので紹介したいと思います。記述も比較的簡単なので容易に実装できそうですよ。背景画像の動かし方としてフェード、スライドといったアニメーションの指定も可能ですし、工夫次第では色々な見せ方を実装することが出来るのではないでしょうか。

jquery-bgswitcherの実装方法について

jquery-bgswitcherのダウンロード
jquery-bgswitcherのダウンロードより、赤枠のボタンをクリックしてファイルをダウンロードしてください。ダウンロードしたファイルの中から「jquery.bgswitcher.js」「style.css」を使います。

また、http://jquery.com/よりjquery.min.jsもダウンロードしてください。
(jQuery 1.7.x以上が必要のようですので、注意してください)

基本的な実装サンプル

サンプルソース sample1.html

<
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.bgswitcher.js"></script>
<script>
$("document").ready(function(){
$(".box").bgswitcher({
images: ["画像URL1","画像URL2","画像URL3","画像URL4","画像URL5"]
});
});
</script>
<div class="box">
<p>背景画像が自動で切り替わります。</p>
</div>

1,2, 3行目でダウンロードしたファイルを読み込んでいます。

4~10行目が背景画像の切り替えの実行、設定をしている部分です。
このサンプルでは設定しているのは画像のみのシンプルな形です。切り替えに使いたい画像の数だけ画像URLを記述します。

12~14行目が背景画像を表示するエリアです。<div class="box">の領域の背景画像を切り替えるので6行目の記述で $(".box").bgswitcher({ と指定しています。

エフェクトを指定して背景画像を切り替え

画像を切り替えるアニメーションは、デフォルトではフェードになっていますが、縦にスライド、横にスライドなど他にも用意されており指定することが可能です。
fade、blind、clip、slide、dropなどを指定出来ます。

<script>
$("document").ready(function(){
$(".box").bgswitcher({
images: ["画像URL1","画像URL2","画像URL3","画像URL4","画像URL5"],
effect: "slide"
});
});
</script>



紹介しているサンプルは<div>要素の背景画像を切り替えていますが、<body>などの背景画像も同様に切り替えることが可能です。

他にも「切り替えの間隔」「エフェクトの時間」「背景画像の順番をシャッフルする」など設定できますので詳しくは、rewishを確認してみてください。

実装時の注意点「要素の重なりについて」

コメント欄にてご指摘頂いた内容を追記しました。H26.9.19
ご指摘ありがとうございます。

上で紹介したサンプルソースでは<div>要素1つに対して実装する記述になっていますが、実際に実装する場面では要素が重なるような構造になるかと思います。

<div class="main">
<div class="box">
<p>背景画像が自動で切り替わります。</p>
</div>
</div>

上記のような場合で外側の<div class="main">に対して背景色や背景画像などを指定していた場合には思ったように実装出来ないことがあります。

↑↑のように外側に要素に背景色を指定している場合は、背景色が手前に表示されてしまい、背景画像を動かしている部分が見えない状態になってしまいます。

上記の解決方法としては、CSSにて要素の重なりの順序を指定する必要があります。

<style type="text/css">
#main{
background-color:#000;
position:relative;
z-index:1;
padding:20px;
}
#box {
z-index:2;
}
</style>

z-indexプロパティは、要素の重なり順序を指定する際に使用します。
外側の<div class="main">に対して、position:relative; z-index:1;を指定しています。
内側の<div class="box">に対して、 z-index:2;を指定して順序を明確にしています。
(z-indexの値が大きいものほど上になります)
z-indexを指定するためには、親要素にpositionプロパティでstatic以外の記述が必要なので親要素に対してposition:relative;を指定してます。

↑↑ 背景色の黒も表示されて、その上に背景画像を動かす<div class="box">が重なっているかと思います。

複数の要素が重なっている場合は、明確な順序を指定することで実装することが出来ます。以上、実装する際の注意点でした。


背景画像なのでメインでクリックしてもらうような部分でもないので、使いどころが難しいかもしれませんが、コンテンツ内のアクセントとしては面白そうですよね。ぜひ、活用してみてください。

背景関連 よろしければこちらもどうぞ




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Comment

  1. みゅこ より:

    sample1.htmlってどれですか?
    ダウンロードしたフォルダに入っていませんでした。
    それからminが1.7以上という事ですが1.11~でも大丈夫ですよね?

  2. peacepopo より:

    みゅこさん
    コメントありがとうございます。
    > sample1.htmlってどれですか?
    > ダウンロードしたフォルダに入っていませんでした。
    ダウンロードしたファイルからは「jquery.bgswitcher.js」「style.css」だけを利用します。
    sample.htmlはダウンロードしたフォルダには入ってません。
    ご自身で新規に作成するファイルのことです。
    ですので、ファイル名は任意の名前です。
    > それからminが1.7以上という事ですが1.11~でも大丈夫ですよね?
    参照、公開元のサイトに1.7以上と記載がありますので制限があるのかと思われます。
    1.11等の古いバージョンは試しておりません。

  3. なな より:

    body全体の背景に実装したいのですが参照元にも方法が記載されておらず、
    jsにあまり詳しくないので、どこをどのように書き換えたら良いのか分からずに
    途方に暮れております。
    よろしければ、改変のポイントを教えていただきたいです。

  4. peacepopo より:

    ななさん
    コメントありがとうございます。
    >body全体の背景に実装したい
    サンプルソースにある記述と同様に背景画像を表示したい要素にclassを指定します。
    bodyに表示したい場合は、 <body class="myname"> のような記述をして
    (myname の部分は任意に決めてください)
    スクリプト実行部分で bodyに記述したクラス名を指定すればいけると思います。
    例) $(".myname").bgswitcher({
    以上、お試しください。

  5. Phantom より:

    bgswitcherの記事、大変参考にさせていただきました。
    実装の際に、初心者向けではあると思いますが気づいた点を記しておきます。
    ボックスの重なりの順序を明確にすることです。
    例えば・・・
    <body>
    <div id="wrapper">
    <div id="box">・・・</div><!–box END–>
       ・
       ・
       ・
    </div><!–wrapper END–>
    </body>
    上記のような構造になっている場合に、id="box"に対してbgswitcherを使いたい場合には、
    id="wrapper"に対して背景色や背景画像を指定しているとbox内の画像がwrapperの背景色
    や背景画像の下になり正常に表示されませんので、wrapperとboxにz-indexプロパティにて
    明確な重なり順序を指定します。
    z-indexを指定するためには、親要素にpositionプロパティでstatic以外の記述が必要なので
    #wrapper { position:relative; z-index:1; }
    #box { z-index:2; }
    などのように指定すると重なり順序はid="box"がid="wrapper"の上に来ますので正常表示されます。
    以上、ご報告までに

  6. peacepopo より:

    Phantomさん
    ご指摘ありがとうございます。
    記事内ではcssの記述については触れておりませんでしたので
    実装する際の注意点として、また追記したいと思います。

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑