jQueryを使ったシンプルなスライドショーの1回目はフェードイン・フェードアウトのみ(全3回)

テクニカルWebデザイン(TechWeb)

先週、授業中にやったjQueryを使ったシンプルなスライドショーです。

スライドショーは3週に分けて少しずつバーションアップしていきます。

PR

まずは動作サンプルから

実際は、もう少しゆっくり切り替えますが、サンプルなので1秒で切り替えています。

jQuery

HTML5

CSS3

 

スライドショーの動作イメージ

スライドショーの動作イメージは、次のような感じです。
スライドショーの考え方

あらかじめスライドに使用する画像を用意して、jQueryを使って表示・非表示を切り替えていきます。

スライドショーの考え方2

 

実際に作ってみよう!

まずはHTMLです。

実際は色々な方法があり、その方法によってマークアップも変わってきます。今回はp要素の中に画像を一つずつ入れる方法でマークアップしました。

このp要素を操作して表示・非表示を切り替えるために、idで名前を付けています。jQueryで操作する場合は、class名でも構いません。連番で名前を付けます。

 

次はCSSです。

ポイントは9行目の「position: absolute;」です。absoluteは絶対位置指定ですが、positionにabsoluteを指定して、topやleftにより座標指定しない場合は、親要素の左上が起点に配置されます。今回の場合は、div#wrapの左上を起点にすべての画像が重なります。なお、HTMLで後に記述している要素が上になります。(重なりの順序は、z-indexで変更可能)

画像の配置イメージ

2番目と3番目の画像を「opacity:0」で透明にします。そうすることで1番目の画像だけが表示されます。

 

最後にスクリプトです。

1行目は、jQuery本体の読み込みです。本家jQueryからダウンロードして使う場合は、scriptタグのsrc属性を変更してください。

変数noは、表示したり非表示にしたりする画像を指定するための変数です。変数maxはスライドに使用する画像の最大枚数を指定します。実際のサイトで使用する場合は、要素数をJavaScriptで取得して変数に代入しますが、今回は分かりやすさを優先して定数を代入しています。

一定間隔で処理を繰り返す setInterval()

setInterval( 処理 , 間隔 );

「処理」では、関数を呼び出しますが、無名関数の使用が多いように感じます。

「処理」の部分を無形関数のfunction(){} とし、

function(){
  ここに処理を記述します。
}

 

「間隔」は、「1000」で1秒です。
5秒間隔で切り替えるには、「5000」にします。

1回目は、ここまで!

2回目は、スライドインのスライドショーに変更します。

その他のTechWebTipsはこちら

 

熊本でWebを学ぶなら
熊本電子ビジネス専門学校のITビジネス科で!

PR

関連記事