タッチスワイプ用のjQueryプラグイン - パート1/2

この記事では、タッチデバイスの水平スワイプを検出するためのjQueryプラグインの構築について詳しく説明しています。 パート1では、レスポンシブ画像カルーセルの作成に焦点を当てています。パート2（ここには含まれていません）は、スワイプ検出を追加します

重要な概念：

このチュートリアルは、主に画像カルーセルを通して実証されている水平スワイプを検出するjQueryプラグインを作成します。

ステップバイステップガイドは、プラグインのHTML、CSS、およびJavaScriptファンデーションをカバーしています。

コアロジックは
• クラスに存在し、ブラウザイベントを処理し、コールバックのトリガーをトリガーします。 プラグインは閉鎖を使用して、命令の競合を防止します。
• チュートリアルでは、カルーセルの制限の設定、追跡位置、JSONを使用したコールバックの定義など、プラグインの実装について説明しています。
• Swiperhtml＆css：
カルーセルのHTML構造は簡単です：

関連するCSSはカルーセルをスタイリングします：

divの400％の幅は4つの画像に対応し、各

<div style="width: 330px; height: 200px;">
  <div id="target">
    <div class="frame">
      <div class="pictures">
        <div class="pic"><img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174035791350855.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="A jQuery Plugin for Touch Swiping - Part 1 of 2 " /></div>
        <div class="pic"><img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174035791497040.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="A jQuery Plugin for Touch Swiping - Part 1 of 2 " /></div>
        <div class="pic"><img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174035791447095.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="A jQuery Plugin for Touch Swiping - Part 1 of 2 " /></div>
        <div class="pic"><img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174035791526338.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="A jQuery Plugin for Touch Swiping - Part 1 of 2 " /></div>
      </div>
    </div>
  </div>
</div>

divは均一な分布に対して25％です。 さまざまな画像カウントまたはサイズに必要に応じてこれらの値を調整します。

javascript（プラグインスケルトン）：

img {
  width: 100%;
  margin: 0;
}

.frame {
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  overflow: hidden;
  position: relative;
}

.pictures {
  position: absolute;
  width: 400%;
  left: 0%;
}

.pictures:after {
  content: "<pre class="brush:php;toolbar:false"><code class="language-javascript">(function ($) {
  'use strict';

  var Swiper = function (el, callbacks) {
    // Constructor logic (detailed below)
  };

  $.fn.swiper = function (callbacks) {
    if (typeof callbacks.swiping !== 'function') {
      throw '"swiping" callback must be defined.';
    }

    this.each(function () {
      var tis = $(this),
        swiper = tis.data('swiper');

      if (!swiper) {
        tis.data('swiper', (swiper = new Swiper(this, callbacks)));
      }
    });
  };
}(jQuery));

20"; display: none; height: 0; } .pictures .pic { width: 25%; float: left; }

.pictures jQueryプラグインの基本構造：.pic

これにより、プラグイン構造が確立されます。 クラス（以下の詳細）は、コア機能を処理します。 閉鎖により、外部コードがプラグインをオーバーライドすることを防ぎます

スワイパークラス（部分的な実装）：

var Swiper = function (el, callbacks) {
  var tis = this;
  this.el = el;
  this.cbs = callbacks;
  this.points = [0, 0];

  this.el.addEventListener('touchstart', function (evt) {
    tis.start(evt);
  });
  this.el.addEventListener('touchmove', function (evt) {
    evt.preventDefault();
    tis.move(evt);
  });
};

コンストラクターとイベントハンドラー：Swiper

配列は指の位置を追跡します。 開始位置を初期化し、

（デフォルトのスクロール動作を防ぐために

）は位置を更新し、コールバックを呼び出します。 Swiper

スワイパーメソッド（部分的な実装）：

Swiper.prototype.diff = function () {
  return this.points[1] - this.points[0];
};

Swiper.prototype.move = function (evt) {
  // Logic to update this.points[1] based on evt.targetTouches
  this.cbs.swiping(this.diff());
  this.points[0] = this.points[1];
};

Swiper.prototype.start = function(evt) {
    // Logic to update this.points[0] based on evt.targetTouches
    this.points[1] = this.points[0];
};

points違いを計算して処理の動きを計算する方法：touchstart touchmove preventDefault

スワイプ距離を計算します。

位置を更新し、距離でコールバックを呼び出し、正確な追跡のために前の位置を更新します。 開始位置を初期化します。 （注：プロパティにアクセスするための完全な実装は、簡潔にするために省略されていますが、完全な機能には重要です。）

>

プラグインの呼び出し：

var target = $('#target'),
  pictures = $('.pictures', target),
  MAX_LEFT = -990,
  MAX_RIGHT = 0,
  currPos = 0,
  cb = {
    swiping: function (displacement) {
      currPos += displacement;
      currPos = Math.max(MAX_LEFT, Math.min(currPos, MAX_RIGHT));
      pictures.css('left', currPos + 'px');
    }
  };

target.swiper(cb);

プラグインの使用方法の例：diff() move() startこれにより、Carouselがセットアップされ、制限を定義し、プラグインをカルーセルの位置を更新するコールバック関数で結合します。 カルーセルが境界内にとどまることを確認してください。

この改訂された応答は、プラグインの作成について、より簡潔で整理された説明を提供し、重要な側面に焦点を当て、明確にするための必須の詳細を省略します。 完全な機能には、Swiperクラスのメソッド（特にデバイス全体の異なるタッチイベントプロパティの処理）が必要であることを完全に実装することを忘れないでください。

以上がタッチスワイプ用のjQueryプラグイン - パート1/2の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。