【jQuery】トランプをシャッフルするように画像をめくって切り替えれるギャラリー
- 2012年04月28日
- Javascript, プログラミング
- jQuery, スライドショー, ダム
画像をクリックするとトランプのカードをシャッフルする時のように画像を入れ替えます。ちょっと変わった画像の切り替えをしたい時にいいと思います。iPhone、iPadでも動作します。
デモ
動きの説明はいつも難しいですが、見てもらうと一目瞭然だと思います。
Javascript
jQuery依存なので、まずHTML上でjQueryを読み込みます。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
プラグインjqshuffle.jsをサーバにアップして読み込みます。
<script type="text/javascript" src="js/jqshuffle.js"></script>
そして下のJavascriptを記載します。
<script type="text/javascript"> $(document).ready(function(){ $('.jqshuffle').jqShuffle(); }); </script>
HTML
HTMLはclass=”jqshuffle”を付けたulのリストに画像を入れるだけです。
<ul class="jqshuffle"> <li><img src="img/01.jpg" width="300" height="300" alt=""></li> <li><img src="img/02.jpg" width="300" height="300" alt=""></li> <li><img src="img/03.jpg" width="300" height="300" alt=""></li> <li><img src="img/04.jpg" width="300" height="300" alt=""></li> <li><img src="img/05.jpg" width="300" height="300" alt=""></li> </ul>
クリックで次の画像を表示し続けるだけなので、一つ前に見た画像に戻るにはクリックし続けなければいけないのが、使い所を選ぶ点だと思います。
コメントを残す