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

重要な概念：

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

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

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

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

divの400％の幅は4つの畫(huà)像に対応し、各

<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％です。 さまざまな畫(huà)像カウントまたはサイズに必要に応じてこれらの値を調(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

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

（デフォルトのスクロール動(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ì)算します。

位置を更新し、距離でコールバックを呼び出し、正確な追跡のために前の位置を更新します。 開(kāi)始位置を初期化します。 （注：プロパティにアクセスするための完全な実裝は、簡(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 サイトの他の関連記事を參照してください。