最もシンプルなスライドショー(その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()しないといけないところにはまってしまいました。ブラウザで開くと、スライドのデザインはともかく、なんとなくスライドショーな雰囲気にはなってるのでよし。今回はこれまで。