スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQueryで画像のスライダーを作ってみた

sample_slide

画像のスライダーを作ってみようと思い、jQueryを使って試してみました。

動作サンプルはこちら。

やりたかったことは、ボタンをクリックするとそれに対応する画像が表示されること。「次へ」と「前へ」のボタンをつけたかったこと。この2点をクリアできるようにしてみました。

JavaScriptのコードはこんな感じです。

<script type="text/javascript">
$(function() {
  var width;   // オブジェクトの幅
  var speed;   // スライドの速度
  var target;  // 対象オブジェクト
  var links;   // リンク
  var maxnum;  // 対象の数

  // 設定
  function init(w, s, t, l) {
    width = w;
    speed = s;
    target = $(t);
    links = $(l);
    maxnum = target.length;

    // リンククリック時の動作
    links.click(function() {
      slide($(this).get(0).rel);
    });

    // デフォルトスライド実行
    slide(1);

    // Prev Next ボタン設置
    $('#slider').append('<div class="s_prev">
<a href="javascript:void(0);">Prev</a></div>');
    $('#slider').append('<div class="s_next" style="left:'+(width-60)+'px;">
<a href="javascript:void(0);">Next</a></div>');

    // 現在表示の確認
    function carnum() {
      var carent = $(target.get(0)).css('left');
      carent = carent.replace("px", "");
      carent = carent.replace("-", "");
      return (carent / width) + 1;
    }

    // Prev
    $('.s_prev').click(function() {
      var cn = carnum();
      if (cn > 1) {
        slide(cn - 1);
      } else {
        slide(maxnum);
      }
    });

    // Next
    $('.s_next').click(function() {
      var cn = carnum();
      if (cn < maxnum) {
        slide(cn + 1);
      } else {
        slide(1);
      }
    });
  }

  // スライド
  function slide(num) {
    for (i = maxnum; i > 0; i--) {
      $($(target.get(i - 1))).animate({'left': '-' + (num - 1) * width + 'px'}
, speed, 'swing');

      if (i == num) {
        $($(links.get(i - 1))).css('background-color', '#ccc');
      } else {
        $($(links.get(i - 1))).css('background-color', '#666');
      }
    }
  };

  // 設定実行
  init(800, 300, '#slider li', '#links a');
});
</script>

とりあえず、動作はクリアできました(FirefoxとSafariで確認済み)。もし、ここはこう書いた方がいいとか、こうした方がスマートだとかあれば教えていただけると幸いです。

関連するエントリー
テーブルの行や列を交互に色付けしてみる

新しい記事

ピックアップ

Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。