最もシンプルなスライドショー(その2)
jQueryといったらセレクターらしいです。div要素を選択するには$("div")、クラスで選択するには$(".class")とピリオドがついたり、いろんな方法で要素を選択できます。リファレンスにはすごい数のセレクターが載ってます。
http://semooh.jp/jquery/api/selectors/
というわけで試行錯誤の末に作ったのが以下のHTMLのJavaScript部分(まだそれほどファイルが大きくないのでJavaScriptを分離させてません)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin: 0; padding: 0; } </style> <script type="text/javascript" src="./jquery.js"></script> <script type="text/javascript"> function nextSlide() { var currentSlide = $("div.slide:visible"); currentSlide.hide(); if (currentSlide.get(0) == $("div.slide:last").get(0)) { $("div.slide:first").show(); } else { currentSlide.next().show(); } } $(document).ready(function() { $("div.slide").hide(); $("div.slide:first").show(); $(window).keyup(function(e) { nextSlide(); }); }); </script> </head> <body> <div class="slide"> <h1>川*^∇^)||<1ページ!</h1> </div> <div class="slide"> <h1>川*^∇^)||<2ページ!</h1> </div> <div class="slide"> <h1>川*^∇^)||<3ページ!</h1> </div> <div class="slide"> <h1>从´∇`)<おしまい!</h1> </div> </body> </html>
- 最初のページ読み込み時にslideクラスのdiv要素(すなわちスライドすべて)を見えなくしてます。
- そして、1枚目のスライドを可視化。
- nextPage()では見えてるスライドを現在のスライドとしてまずhide()してから、next().show()で次のスライドを表示。
- もし現在のスライドが最後のスライドなら1枚目のスライドを表示させる。
ということをしてます。戸惑ったのは現在のスライドと最後のスライドの比較部分。if (currentSlide == $("div.slide:last"))で比較して、div要素を比較してると思ってたんだけど、$("div:slide:last")で返ってくるのはjQueryオブジェクトなんですね(もちろんcurrentSlideもjQueryオブジェクト)。そこからdiv要素を取り出すにはget()しないといけないところにはまってしまいました。ブラウザで開くと、スライドのデザインはともかく、なんとなくスライドショーな雰囲気にはなってるのでよし。今回はこれまで。