「Swip」はiPhoneなどでスワイプを行うとページを切り替える様な処理が簡単に実装出来るライブラリです。
使い方
主な記述は以下の様になります。ここがスワイプ可能な部分になります。
<div id='slider'> <ul> <li style='display:block'><div>1</div></li> <li style='display:none'><div>2</div></li> <li style='display:none'><div>3</div></li> <li style='display:none'><div>4</div></li> <li style='display:none'><div>5</div></li> </ul> </div>
ライブラリはCSSとJSファイルで出来ています。
CSSファイルはheadタグ内で読み込み
<link href='style.css' rel='stylesheet'/>
JSファイルはbodyタグの閉じタグの直前で読み込みます。その後、Swipeオブジェクトを生成し、JSでの処理を実行します。この時にスワイプ処理をしたいタグのIDの要素を引数とします。
<script src='swipe.js'></script> <script> new Swipe(document.getElementById('slider')); </script>
こちらで試せます。iPhoneのSafariなどで開くとスワイプで切り替えが可能です。なお、マウスでは出来ないみたいです。 prev や next のリンクをクリックして切り替える事は可能みたいです。
この様に記述すると画像ファイルをスワイプする事も可能です。 style='width:300px' の部分を画像より大きい値に変更するのを忘れない様にして下さい。
<div id='slider' class='swipe' style='width:300px'> <ul> <li style='display:block'><img src="../images/img01.jpg"></li> <li style='display:none'><img src="../images/img02.jpg"></li> <li style='display:none'><img src="../images/img03.jpg"></li> <li style='display:none'><img src="../images/img04.jpg"></li> <li style='display:none'><img src="../images/img05.jpg"></li> </ul> </div>
サンプルはこちら
タイマーと組み合わせると自動的にめくられる様にも出来ます。
var slider = new Swipe(document.getElementById('slider')); setInterval(function() { slider.next(); }, 3000);
サンプルはこちら。3秒間隔で画像が切り替わります。
関連情報
こちらの記事で知りました。
新春特別企画:2012年注目のモバイル向けJavaScriptフレームワーク・ライブラリあれこれ|gihyo.jp … 技術評論社
http://gihyo.jp/dev/column/newyear/2012/mobile-javascript?page=2