ホームページ背景自動切替jquery-bgswitcherを実装

こんにちは! Benです。

職場のWEBサイトのリニューアルが2月に行い、思った以上にすんなりといって安心しました。その中でjQueryを使った背景自動切替、つまり背景のスライドショーを実装したのでそれをノートしたいと思います。使用したのはjquery-bgswitcherです。

まずはjQuery本体が読み込まれていることが前提になります。以前のノートが参考になると思います。jquery-bgswitcherのファイルはここからダウンロードできます。ZIPでダウンロードすると、いろいろなファイルがあり、同じファイルも複数あったりしますが、その中で使うファイルはjquery.bgswitcher.jsだけです。

 
 
 
 

 
  <body class="bg" style="height:100%">
今回のHTMLソースです。ヘッド部でまず2行目でjQuery本体を読み込んでいます。バージョンを表す後ろの数字は異なっても構いません。3行目でbgswitcherの読み込み、4行目以降で設定と起動を行っています。出力先のクラス名を今回はbgとつけた(6行目)ので背景を変えたいタグ(今回は15行目のbody)のクラスをbgに合わせます。

20160410a.png
うまくいくとご覧のように背景が表示されます。上記のソースコードの7行目にimages:["js/images/1.jpg"... ]とありますが、この部分に表示したい背景画像のリストを列記します。上の図の背景はhtmlが保存されているフォルダを起点に、jsフォルダの中のimagesフォルダにある1.jpgを指しています。

20160410b.png
フェードしながら次の画像に切り替わっていきます。9行目にinterval: 5000というのがありますが、これが切り替わる時間で、単位がミリ秒なので5秒に設定されています。の職場のはあまり頻繁に切り替わると煩わしいので10秒に設定しています。

20160410c.png
同じく9行目の最後のshuffle: trueは読み込むたびに順番がランダムに入れ替わります。表示枚数が多いとき、順番通りだといつも同じ画像だけになるので、毎回違う画像が出るようにTrueにしています。そのほかさまざまなオプションがありますので、ぜひ調べてみてはいかがでしょうか。

この記事へのコメント


この記事へのトラックバック