スライドショー
    ● スライドショーの準備


jQueryを実用的に使う為に、スライドショーを作って見ます。

世の中にはおしゃれなスライドショーがたくさんありますが、おしゃれなものはプラグインを活用するにして、まずは初心者らしいものを作ります。

具体的には下の様な画面で、「スライドショースタート」ボタンをクリックしたら中央の大きい写真が切り替わっていくものです。切り替わる写真は、下の写真列の左から順番にピックアップします。

画面

 

まずは、bodyタグの中をプログラミングしました。

プログラム

 

クラス「closeup」の写真が中央の大きい写真で、下に6つ並べた写真にはクラス「array」と名付けました。

クラス「array」の写真は複数枚有りますから、各写真(要素)に番号を付けて呼び出す事ができます。この番号を「インデックス」と言い、0から始まります。

インデックスで呼び出すためには下の様に記述します。

$("クラス名":eq(インデックス)")

例えば3番目の要素(「0mamiya35.jpg」)を呼び出したい時には下の様に記述します。

$(".array":eq(2)")

また、要素の総数は次のように記述して抽出できます。

$("クラス名".length")

今回の例では下の記述で数字6が抽出されます。

$(".array".length")

 

準備はここまでにして、次のページでheadタグ内のscript記述を行います。

ページトップへ

←前ページへ               目次へ戻る               →次ページへ

コーナー