2014/04/01

【jQuery】超カンタン!!ループするスライドショーの作り方

【JavaScript】超簡単!!ループするスライドショーの作り方

今やほとんどのWebサイトで導入されているスライドショーやカルーセルですが,プラグインを使うと予期せぬエラーが発生したり,HTMLの構造をいじる必要が出てきたりと,意外に面倒な場合があります.

そこで今回は,スライドショーを簡単に自作する方法を紹介します.

目次

ソースコード

まず,このようにリスト要素を用意します.

例として,高さ50pxの画像を使用します.

<ul class="slideSampleThumbnail">
    <li><img src="http://placehold.jp/000000/ffffff/200x50.png"></li>
    <li><img src="http://placehold.jp/808080/ffffff/200x50.png"></li>
    <li><img src="http://placehold.jp/0000FF/ffffff/200x50.png"></li>
    <li><img src="http://placehold.jp/00FF00/ffffff/200x50.png"></li>
    <li><img src="http://placehold.jp/00FFFF/ffffff/200x50.png"></li>
    <li><img src="http://placehold.jp/FFFF00/ffffff/200x50.png"></li>
    <li><img src="http://placehold.jp/FF0000/ffffff/200x50.png"></li>
    <li><img src="http://placehold.jp/800080/ffffff/200x50.png"></li>
  </ul>

そして,この要素にスタイルを設定します.

.slideSampleThumbnail {
  float: left;
  list-style: none;
  height: 280px;
  overflow: hidden;
  position: relative;
  top: 10px;
}

高さや位置などは,適宜変更してください.

以上で要素の準備は完了です.

最後に,jQueryを使用して動き続けるループを作成します.

var loop = setInterval(function() {
    //li先頭要素のクローンを作成
    var clone = $(".slideSampleThumbnail li:first").clone(true);
    //li先頭要素のマージントップにマイナスを指定しアニメーションさせる
    $(".slideSampleThumbnail li:first").animate({
	marginTop : "-70px"
    }, {
	duration : 500,
	complete : function() {
	    //処理完了時に先頭要素を削除
	    $(".slideSampleThumbnail li:first").remove();
	    //クローンをliの最後に追加
	    clone.clone(true).insertAfter($(".slideSampleThumbnail li:last"));
	}
    });
}, 1500);

setInterval()メソッドを利用し,一定時間ごとに処理を行わせます.

まず,リストの先頭にある要素のクローンを作成し,消えるアニメーションを実行します.
サンプルの場合,全ての高さが70pxとなっているので,margin-topに-70pxを指定します.

先頭の要素のアニメーション動作が完了した時にこの要素を破棄し,最初に作成したクローンをリストの最後尾に追加します.

これでループし続けているように見えます.

サンプル

動作としては以下のようになります.

まとめ

かなり簡単に作成出来ることがお分かりいただけたかと思います.

今回紹介したのは縦の動きでしたが,リストを横に並べ,margin-leftにマイナスの値を与えることで横方向のスライドショーを作成することが出来ます.

リストの配置やアニメーションの動きを変化させることで,縦横の動きだけでなく様々なスライドショーを作成できるので,是非色々試してみてください.