背景の画像をフルスクリーンで表示し、尚且つスライドショー的に魅せたいときjQueryを使って簡単に設定する方法の紹介です。
プラグインは使用せず、簡単なコードを記述するだけで実装できますので軽量で動作します。
デモサンプル
1.HTMLを記述します。
body直下に下記のコードを記述します。画像パス、幅、高さは任意で変更してください。
|
<div class="bgslideshow"> <img src="画像パス1" width="○○px" height="○○px" alt="" /> <img src="画像パス2" width="○○px" height="○○px" alt="" /> <img src="画像パス3" width="○○px" height="○○px" alt="" /> </div> |
2.jQuery本体の読み込みとJavaScriptを記述
|
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(function(){ $('.bgslideshow img:gt(0)').hide(); setInterval(function(){ $('.bgslideshow :first-child').fadeOut(3000) .next('img').fadeIn(3000) .end().appendTo('.bgslideshow'); }, 5000); }); </script> |
3.CSSを記述
背景の画像を固定するのとフルクリーンにするために必要にな指定になっています。
|
.bgslideshow {position:fixed; left:0; top:0; z-index: -1; height:100%; width:100%;} .bgslideshow img {position: absolute; left:0; top:0; min-height:100%; min-width:100%; height: auto; width:100%;} |
以上になります。
ここからは余談ですが、、、
今回使用した、jQueryコードの中身を少し確認しておきたいと思います。
:gt(index)
指定したindexよりも大きいインデックスを持つ要素すべてを選択する。
例)インデックスが3よりも大きいli要素の背景を全て黄色にします。
|
<ul> <li>0番目のリストになります。<li> <li>1番目のリストになります。<li> <li>2番目のリストになります。<li> <li>3番目のリストになります。<li> <li>4番目のリストになります。<li> <li>5番目のリストになります。<li> <ul> |
JavaScriptは以下のようになります。
|
$('ul li:gt(3)').css('background-color', 'yellow'); |
デモサンプル
:setInterval
JavaScriptでのfunction処理を、一定の間隔でくりかえし行う時の指定に「setInterval」というものがあります。一定感覚で画像を切り替えたいときなど、タイマー設定のような処理を行いたい時に便利な指定です。
JavaScriptは以下のようになります。
|
$(function(){ setInterval(function(){ //ここに繰り返したい処理を記述 },1000); }); |
1000と記述してある数値は、繰り返しを行う処理の間隔を指定しています。
例)2秒ごとに画像の位置を右に30pxずつ移動して表示したいとき
HTMLを記述します。
|
<p><img src="画像パス" alt="" /></p> |
JavaScriptは以下のようになります。
|
$(function(){ $('img').css({position: 'absolute', left: '0'}); setInterval(function(){ $('img').stop().animate({left: '+=' + '30' + 'px'},1000); },2000); }); |
1000と記述している部分は、横に30px移動するのにかける時間の指定で、2000と記述している部分は、移動する時間の間隔の時間指定になります。
デモサンプル
.next()
その要素の隣にある要素を取得する
.end()
一つ前の要素セットに戻ることができるメソッド
.appendTo()
element.appendTo(target)という場合、elementに「挿入するコンテンツ」、targetに「挿入されるコンテンツ」
例).inner要素の後ろにp要素を追加する場合
|
<h2>.appendTo()について</h2> <div class="container"> <div class="inner">こんにちは</div> <div class="inner">さようなら</div> </div> |
|
$('<p>挿入してください</p>').appendTo('.inner'); |
このように記述すると、先程のHTMLコードが、下記のように変更されます。
|
<h2>.appendTo()について</h2> <div class="container"> <div class="inner">こんにちは<p>挿入してください</p></div> <div class="inner">さようなら<p>挿入してください</p></div> </div> |