ホームページ作成 神戸★1人で悩まないでWeb制作や運営でお困りの方はお気軽にご相談ください。

jQueryで画面いっぱいに背景写真を表示したり、複数の写真をランダムで表示させる方法

2017-01-24 840 view
  • facebook 0
  • Pocket 0
  • twitter
jQueryで画面いっぱいに背景写真を表示したり、複数の写真をランダムで表示させる方法

パソコン(ブラウザ)の画面いっぱいに背景画像を表示する方法を、jQueryを利用して実装する方法を紹介致します。

2ではランダム表示の実装を行います。
背景に写真(画像)を使ったホームページはFLASHサイトをはじめ多くのサイトがありますが、jQueryを利用してHTMLサイトでも大きくて綺麗な写真(画像)をパソコン(ブラウザ)の画面に合わせてサイトの背景に表示が可能です。

見た目にもインパクトがあってとても印象的!

スポンサーリンク

1,画面いっぱいに写真を表示させるには、backstretch.min.jsを設置

下記のURLよりjQueryをダウンロードします。
jQuery Backstretch

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script src="jquery.backstretch.min.js"></script>
<script>
$.backstretch("sample.jpg");
</script>

”sample.jpg(任意)”という写真(画像)を用意して、上記をHTMLの</head>前に挿入しましょう。
写真(画像)がぴったり画面いっぱい(ブラウザサイズ)に表示されます。

2,背景写真をランダムに切り替えて表示する方法

さて次に、画面いっぱいに表示させた写真(画像)をランダムに切り替える方法を実装をします。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type="text/javascript" src="common/js/jquery.backstretch.min.js"></script>

backstretch.min.jsをダンロード後、上記をHTMLの</head>前に挿入しましょう。
ここまでは、1,と同じです。

さて、ランダムに表示させたい写真を準備します。
写真(画像)の横幅は、1920px以上はあった方がどのディスプレイサイズ(ブラウザサイズ)でも綺麗に表示されると思います。
次に、肝心である写真(画像)のファイル名を編集しましょう。
写真の調整後は、1.jpg、2.jpg、3.jpg、4.jpg、5.jpg、6.jpg、7.jpgとなるような数値(昇順)でのファイル名にしましょう。

<script type="text/javascript">
$(document).ready(function(){
bgImageTotal=7; randomNumber = Math.round(Math.random()*(bgImageTotal-1))+1; imgPath=($.backstretch('common/js/'+randomNumber+'.jpg')); $('body').css('background-image', ('url("'+imgPath+'")'));});
</script>

次に上記のジャバスクリプトを挿入しましょう。

写真(画像)は、backstretch.min.jsと同じフォルダ内に格納しておくのが無難です。
‘common/js/’は、backstretch.min.jsと写真が格納されている階層場所を示すソースです。
「bgImageTotal=7」の7は、写真(画像)の枚数を表しております。
写真の枚数に応じて変更をして下さい。

以上で、ページを開く度にランダムに写真(画像)が表示されます。
是非、お試し下さい。

■実装サイト
歯医者 東大阪

当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

  • facebook 0
  • Pocket 0
  • twitter