Plugin jQuery untuk swiping sentuh - bahagian 1 dari 2

Butiran artikel ini membina plugin jQuery untuk mengesan swipes mendatar pada peranti sentuh. Bahagian Satu memberi tumpuan kepada mewujudkan karusel imej yang responsif. Bahagian dua (tidak termasuk di sini) akan menambah pengesanan sapu.

Konsep Utama:

• Tutorial ini mencipta plugin jQuery yang mengesan swipes mendatar, terutamanya ditunjukkan melalui karusel imej.
• Panduan langkah demi langkah meliputi asas HTML, CSS, dan JavaScript plugin.
• Logik teras berada di dalam kelas Swiper, mengendalikan peristiwa pelayar dan mencetuskan panggilan balik. Plugin menggunakan penutupan untuk mencegah konflik penamaan.
• Tutorial menerangkan pelaksanaan plugin, termasuk menetapkan had karusel, kedudukan penjejakan, dan mendefinisikan panggilan balik menggunakan JSON.

Struktur HTML untuk Carousel adalah mudah:

gaya CSS yang berkaitan dengan karusel:

<code class="language-html"><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" 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" 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" 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" class="lazy" alt="A jQuery Plugin for Touch Swiping - Part 1 of 2 "></div>
      </div>
    </div>
  </div>
</div></code>

lebar 400% div

<code class="language-css">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));</code>

20"; display: none; height: 0; } .pictures .pic { width: 25%; float: left; } menampung empat imej, manakala masing -masing

div adalah 25% untuk pengedaran walaupun. Laraskan nilai -nilai ini seperti yang diperlukan untuk jumlah atau saiz imej yang berbeza. .pictures .pic

JavaScript (plugin Skeleton):

Struktur Asas Plugin JQuery:

Ini menetapkan struktur plugin. Kelas

<code class="language-javascript">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);
  });
};</code>

(terperinci di bawah) mengendalikan fungsi teras. Penutupan menghalang kod luaran daripada mengatasi plugin.

Swiper

kelas swiper (pelaksanaan separa):

pembina dan pengendali acara

:

Swiper

TRAVE TRACKS POSISIONS FINGER.

<code class="language-javascript">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];
};</code>

memulakan kedudukan permulaan, dan

(dengan points untuk mengelakkan tingkah laku menatal lalai) mengemas kini kedudukan dan memanggil panggilan balik. touchstart touchmove preventDefault kaedah swiper (pelaksanaan separa):

Kaedah untuk mengira perbezaan dan pergerakan pengendalian:

mengira jarak sapu.

<code class="language-javascript">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);</code>

mengemas kini kedudukan, memanggil panggilan balik dengan jarak, dan mengemas kini kedudukan sebelumnya untuk penjejakan yang tepat.

memulakan kedudukan permulaan. (Nota: Pelaksanaan lengkap untuk mengakses sifat diff() ditinggalkan untuk keringkasan tetapi penting untuk fungsi penuh.) move() start evt.targetTouches Plugin Invocation:

Contoh Cara Menggunakan Plugin:

Ini menubuhkan karusel, mentakrifkan had, dan mengikat plugin dengan fungsi panggil balik yang mengemas kini kedudukan karusel.

dan memastikan karusel kekal dalam batas.

Sambutan yang disemak ini memberikan penjelasan yang lebih ringkas dan teratur mengenai penciptaan plugin, yang memberi tumpuan kepada aspek -aspek utama dan menghilangkan butiran yang kurang penting untuk kejelasan. Ingatlah bahawa pelaksanaan lengkap kaedah kelas Swiper (terutamanya mengendalikan sifat acara sentuhan yang berbeza di seluruh peranti) adalah perlu untuk fungsi penuh.

Atas ialah kandungan terperinci Plugin jQuery untuk swiping sentuh - bahagian 1 dari 2. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!