【jQuery】シンプルなスライドイメージ

jQueryを使ったスライドイメージを作成する方法を紹介します。「.animate()」を使って作るシンプルなスライドの画像切り替えとなっています。

スライドイメージの作り方

まずは、スライドさせたい画像と切り替え用のボタンをマークアップしておきます。

<div id="slide-wrap">
  <div id="slide">
    <div class="slide-img">
      <img src="photo1.jpg" />
      <img src="photo2.jpg" />
      <img src="photo3.jpg" />
    </div>
  </div>
  <ul class="slide-btn">
    <li class="next">＜</li>
    <li class="prev">＞</li>
  </ul>
</div>

続いて、CSSでスライドさせるエリアなどを整えていきます。

#slide-wrap {
  width: 250px;
  height: 187px;
  margin: 0 auto;
  position: relative;
}
#slide {
  overflow: hidden;
}
.slide-img {
  width: 750px;
}
.slide-img img {
  display: block;
  float: left;
  width: 250px;
}

まず、一番外側のボックスに画像を表示させたい幅などを指定します。そして、画像を囲っているボックスに画像の枚数分だけ幅を指定して、それを囲むボックスに対して「overflow: hidden;」を指定することで、表示領域以外は非表示になるようにしています。

今度は、jQueryを使って実際にスライドするアニメーションを作っていきます。

$(function() {
  var $slideImg = $(".slide-img");
  $(".slide-img img:last").prependTo($slideImg);
  $slideImg.css("margin-left","-250px");
  $(".next").click(function() {
    $slideImg.animate({
      "margin-left" : parseInt($slideImg.css("margin-left"))-250+"px"
    },
    function() {
    $slideImg.css("margin-left","-250px");
    $(".slide-img img:first").appendTo($slideImg);
    });
  });
  $(".prev").click(function() {
    $slideImg.animate({
      "margin-left" : parseInt($slideImg.css("margin-left"))+250+"px"
    },
    function() {
    $slideImg.css("margin-left","-250px");
    $(".slide-img img:last").prependTo($slideImg);
    });
  });
});

2行目の「.prependTo()」で最後のimg要素を「.slide-img」の先頭に移動させています。それを「.css()」で-250pxずらして、1枚目の画像が表示されるようにしています。
アニメーション部分にある「parseInt()」は、指定した文字列を数値に変換する命令で、この場合だと「.slide-img」の「margin-left」を常に250px足したり引いたりしています。

• DEMO

以上が、jQueryを使ったシンプルなスライドイメージの作り方となります。