フルスクリーンのスライドショー背景にしたい

slideshowbg

背景の画像をフルスクリーンで表示し、尚且つスライドショー的に魅せたいときjQueryを使って簡単に設定する方法の紹介です。

プラグインは使用せず、簡単なコードを記述するだけで実装できますので軽量で動作します。

 

デモサンプル

1.HTMLを記述します。

body直下に下記のコードを記述します。画像パス、幅、高さは任意で変更してください。

 

2.jQuery本体の読み込みとJavaScriptを記述

 

3.CSSを記述

背景の画像を固定するのとフルクリーンにするために必要にな指定になっています。

 

以上になります。

 

ここからは余談ですが、、、
今回使用した、jQueryコードの中身を少し確認しておきたいと思います。

:gt(index)

指定したindexよりも大きいインデックスを持つ要素すべてを選択する。

例)インデックスが3よりも大きいli要素の背景を全て黄色にします。

 JavaScriptは以下のようになります。

 

デモサンプル

:setInterval

JavaScriptでのfunction処理を、一定の間隔でくりかえし行う時の指定に「setInterval」というものがあります。一定感覚で画像を切り替えたいときなど、タイマー設定のような処理を行いたい時に便利な指定です。

 JavaScriptは以下のようになります。

 1000と記述してある数値は、繰り返しを行う処理の間隔を指定しています。

例)2秒ごとに画像の位置を右に30pxずつ移動して表示したいとき

HTMLを記述します。

  JavaScriptは以下のようになります。

 1000と記述している部分は、横に30px移動するのにかける時間の指定で、2000と記述している部分は、移動する時間の間隔の時間指定になります。

 

デモサンプル

.next()

その要素の隣にある要素を取得する

 

.end()

一つ前の要素セットに戻ることができるメソッド

 

.appendTo()

element.appendTo(target)という場合、elementに「挿入するコンテンツ」、targetに「挿入されるコンテンツ」

例).inner要素の後ろにp要素を追加する場合

 このように記述すると、先程のHTMLコードが、下記のように変更されます。




タイトルとURLをコピーしました