この記事では、タッチデバイスの水平スワイプを検出するためのjQueryプラグインの構(gòu)築について詳しく説明しています。 パート1では、レスポンシブ畫像カルーセルの作成に焦點(diǎn)を當(dāng)てています。パート2（ここには含まれていません）は、スワイプ検出を追加します

重要な概念：

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

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

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

関連する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/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174035791350855.jpg"  class="lazy" alt="A jQuery Plugin for Touch Swiping - Part 1 of 2 " /></div>
        <div class="pic"><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174035791497040.jpg"  class="lazy" alt="A jQuery Plugin for Touch Swiping - Part 1 of 2 " /></div>
        <div class="pic"><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174035791447095.jpg"  class="lazy" alt="A jQuery Plugin for Touch Swiping - Part 1 of 2 " /></div>
        <div class="pic"><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174035791526338.jpg"  class="lazy" alt="A jQuery Plugin for Touch Swiping - Part 1 of 2 " /></div>
      </div>
    </div>
  </div>
</div>

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

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="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プラグインの基本構(gòu)造：.pic

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

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

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

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

（デフォルトのスクロール動(dòng)作を防ぐために

）は位置を更新し、コールバックを呼び出します。 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違いを計(jì)算して処理の動(dòng)きを計(jì)算する方法：touchstart touchmove preventDefault

スワイプ距離を計(jì)算します。

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

>

プラグインの呼び出し：

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がセットアップされ、制限を定義し、プラグインをカルーセルの位置を更新するコールバック関數(shù)で結(jié)合します。 カルーセルが境界內(nèi)にとどまることを確認(rèn)してください。

この改訂された応答は、プラグインの作成について、より簡(jiǎn)潔で整理された説明を提供し、重要な側(cè)面に焦點(diǎn)を當(dāng)て、明確にするための必須の詳細(xì)を省略します。 完全な機(jī)能には、Swiperクラスのメソッド（特にデバイス全體の異なるタッチイベントプロパティの処理）が必要であることを完全に実裝することを忘れないでください。

以上がタッチスワイプ用のjQueryプラグイン - パート1/2の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。