背景画像をスライドショーできるプラグイン【jQuery.BgSwitcher】

jQuery.BgSwitcherどうやってつかうのかなぁ

こんにちはうらしまです。
プログラミング学習中の私がjQuery のプラグインを紹介したいと思います。

今回は背景を自動で切り替える「jQuery.BgSwitcher」をどこよりもわかりやすく紹介していきます。

jQuery.BgSwitcherとは背景画像を簡単に切り替えることができるプラグインです


デモ画面です
Demo – jQuery.BgSwitcher

jQuery.BgSwitcher作成までの流れ

  1. ファイルの準備
  2. コードの書き方

準備

まずフォルダに「index.html」と適当な画像3枚ほどを準備してください

画像はO-DANというサイトからダウンロードしてきました
フリー画像が多数あるので自分の好きな画像を見つけてください。

今回は画像を名前をわかりやすいように、1、2、3などに変更しました。


こんな感じで
次に
jQuery.BgSwitcher のサイトに飛んでください。
サイトに飛んだらダウンロードの下の jquery.bgswitche.jsの上で右クリックを押してください。
それから名前を付けて保存で先ほど作ったフォルダの中に入れてください

これで準備完了です。

コードの書き方

HTML

 

CSS

javascript

エフェクトの種類を変えることよって画像の切り替わり方が変わります。

最終的にこんな感じにしてください

全ソースコード

 

 

他にもオプションで様々なエフェクトがつ追加できるのでこちらをご確認ください。

 

jQuery.BgSwitcherのオプション一覧

オプション 説明
interval 背景画像を切り替える間隔を指定
loop

切り替えを繰り返すか指定 
true=繰り返す false=繰り返さない

shuffle 背景画像の順番をシャッフルするか指定
true=する false=しない
effect エフェクトの種類を
fade,blind,clip,slide,drop,hide
から指定
duration エフェクトの時間を指定します
easing エフェクトのイージングを
linear,swing
から指定

以上で 「jQuery.BgSwitcher」 を実装することができます。
以上、背景画像をスライドショーできるプラグイン「jQuery.BgSwitcher」の紹介でした。

上記の方法でできなかったと言う方はコメントを遠慮せず送ってください

開発環境

検索エンジン google chrome
テキストエディタ vscode使用

Follow me!

コメントを残す

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

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