<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>

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));

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

Struktur Asas Plugin JQuery:

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

pembina dan pengendali acara

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];
};

(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:

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);

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.

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.