フリック・スワイプのサンプルのバージョンアップ

 以前作ったJQerryで動くフリック・スワイプのサンプルのバージョンアップです。今回のサンプルとの変更点は、表示位置をの設定を柔軟に出きるようにしました。Smartphoneにて画像を縦スクロールしたとき、windowスクロールが動かない欠点を改善いたしました。ボタンの制御も変更しています。
 使い方は、画像をスライドさせるとスライドした方向に一つ移動します。小さい画像をクリックすると、対応した画像がスライドして表示されます。「最初」「最後」をクリックすると最初、最後の画像まで自動的スライドします。

 動作環境は、IE6以上、FireFox、Safari、iphone、ipad、Androidで動きます。今回はCSS3を使っていないので、その他のブラウザでも動くと思います。

リック・スワイプのサンプル(var 1.1)

iphone、ipad、Androidで確認される方は、下記のQRコード使って下さい。

変更するにあったって

1. 画像を変更変更、追加する
 index.htmlの「#MainView_Area」の「li」部分に追加してください。画像の幅(間隔)は、「css/index.css」の「#SubOperat_Area li」の「widht」を変更してください。

2. サブ画像とボタンについて
 サブ画像とボタンを必要でない場合は、「html」の表示部分削除してください。

3. デザインを変更する
デザインを変更するには、「index.html」「index.css」を修正してください。

4. iphone,androidで使う場合 
 metaタグの「viewport」の設定があった方が、使いやすいです。無くても動きますが、注意してください。

5. Javaseriptの設定変更をするには
 「js/java.js」ファイルの下記の部分を変更してください
//easingの種類については、下記のサイトを参考にしてください
// http://semooh.jp/jquery/cont/doc/easing/
var easing_speed = “swing”;

//CSSのタグ
var MainId = “#MainView_Area”;
var SubId = “#SubOperat_Area”;

//画像の表示領域の位置の設定
var view_position = “center”;

//最初の画像の位置の設定
var img_position = “center”;

//表示領域のサイズ 「ViewWidth」が横幅で%かpxを指定して下さい。「ViewHeight」は高さです。pxでしてしてください。
var ViewWidth = “70%”;
var ViewHeight = “300px”;

//画像移動時間
var Timer = 500;

 ソースコードは、以下のようになっています。もし良かったらダウンロードしてください。
tar形式でダウンロード
zip形式でダウンロード

(感想 
 以前のより使いやすくなったと思いますjavascriptのコードがベタガキなので、オブジェクト思考でかけるようになりたい。

Be the first to comment on "フリック・スワイプのサンプルのバージョンアップ"

Leave a comment