[レスポンシブ対応]背景画像をスライドショーできるプラグイン【jQuery.BgSwitcher】

jQuery.BgSwitcherを使って背景画像をスライドできるページを作ってみたいけど難しそう

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

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

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

レスポンシブ対応のしているのでスマートフォンでサイト見たときのもサイトの見た目が崩れることはありません。


こちらがデモ画面です
Demo – jQuery.BgSwitcher

お知らせ

記事の内容が気に入ったら、Twitterやブログなので拡散お願いいたします🙇‍♂️

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」の紹介でした。

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

わからないところをお問い合わせ

関連記事

背景画面を動画に変更できるjqueryのプラグイン「VIDE」を下記の記事で紹介しています。
jQueryプラグイン「VIDE」

開発環境

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

Follow me!

2 COMMENTS

R

どこよりも分かりやすかったです!インターン先の課題で躓いていたのでとても助かりました。これからもブログ読ませていただきます。ありがとうございました。

返信する
yoshihiko

R様
コメントありがとうございます
当ブログがお役になってとても嬉しいです、今後ともよろしくお願いいたします。

返信する

コメントを残す

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

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

PAGE TOP