3

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

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コードが、下記のように変更されます。




3 Comments

  1. とても魅力的なサンプルが多く、拝見・勉強をさせて頂いております。
    一つご質問ですが、こちらのサンプルをカスタマイズし商用サイトに使用させて頂いても大丈夫でしょうか。

    • 「はらだ」さん
      コメントありがとうございます。
      サイト内のサンプルは、ご自由に再利用して頂いて構いませんのでお好みにカスタマイズしてご利用くださいヽ(*´∀`)ノ

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

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