This article details building a jQuery plugin for detecting horizontal swipes on touch devices. Part one focuses on creating a responsive image carousel. Part two (not included here) will add swipe detection.
Key Concepts:
- This tutorial creates a jQuery plugin that detects horizontal swipes, primarily demonstrated through an image carousel.
- A step-by-step guide covers the HTML, CSS, and JavaScript foundation of the plugin.
- The core logic resides within the
Swiper
class, handling browser events and triggering callbacks. The plugin uses a closure to prevent naming conflicts. - The tutorial explains plugin implementation, including setting carousel limits, tracking position, and defining callbacks using JSON.
HTML & CSS:
The HTML structure for the carousel is straightforward:
<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>
The associated CSS styles the carousel:
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; }
The .pictures
div's 400% width accommodates four images, while each .pic
div is 25% for even distribution. Adjust these values as needed for different image counts or sizes.
JavaScript (Plugin Skeleton):
The jQuery plugin's basic structure:
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); }); };
This establishes the plugin structure. The Swiper
class (detailed below) handles the core functionality. The closure prevents external code from overriding the plugin.
Swiper Class (Partial Implementation):
The Swiper
constructor and event handlers:
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]; };
The points
array tracks finger positions. touchstart
initializes the starting position, and touchmove
(with preventDefault
to prevent default scrolling behavior) updates the position and calls the callback.
Swiper Methods (Partial Implementation):
Methods for calculating differences and handling movement:
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()
calculates the swipe distance. move()
updates the position, calls the callback with the distance, and updates the previous position for accurate tracking. start
initializes the starting position. (Note: The complete implementation for accessing evt.targetTouches
properties is omitted for brevity but is crucial for the full functionality.)
Plugin Invocation:
Example of how to use the plugin:
This sets up the carousel, defines limits, and binds the plugin with the callback function that updates the carousel's position. The Math.max
and Math.min
ensure the carousel stays within bounds.
This revised response provides a more concise and organized explanation of the plugin's creation, focusing on the key aspects and omitting less essential details for clarity. Remember that the complete implementation of the Swiper
class's methods (especially handling different touch event properties across devices) is necessary for full functionality.
The above is the detailed content of A jQuery Plugin for Touch Swiping - Part 1 of 2. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

JavaScriptisidealforwebdevelopment,whileJavasuitslarge-scaleapplicationsandAndroiddevelopment.1)JavaScriptexcelsincreatinginteractivewebexperiencesandfull-stackdevelopmentwithNode.js.2)Javaisrobustforenterprisesoftwareandbackendsystems,offeringstrong

In JavaScript, choosing a single-line comment (//) or a multi-line comment (//) depends on the purpose and project requirements of the comment: 1. Use single-line comments for quick and inline interpretation; 2. Use multi-line comments for detailed documentation; 3. Maintain the consistency of the comment style; 4. Avoid over-annotation; 5. Ensure that the comments are updated synchronously with the code. Choosing the right annotation style can help improve the readability and maintainability of your code.

Yes,JavaScriptcommentsarenecessaryandshouldbeusedeffectively.1)Theyguidedevelopersthroughcodelogicandintent,2)arevitalincomplexprojects,and3)shouldenhanceclaritywithoutclutteringthecode.

Java and JavaScript are different programming languages, each suitable for different application scenarios. Java is used for large enterprise and mobile application development, while JavaScript is mainly used for web page development.

JavaScriptcommentsareessentialformaintaining,reading,andguidingcodeexecution.1)Single-linecommentsareusedforquickexplanations.2)Multi-linecommentsexplaincomplexlogicorprovidedetaileddocumentation.3)Inlinecommentsclarifyspecificpartsofcode.Bestpractic

CommentsarecrucialinJavaScriptformaintainingclarityandfosteringcollaboration.1)Theyhelpindebugging,onboarding,andunderstandingcodeevolution.2)Usesingle-linecommentsforquickexplanationsandmulti-linecommentsfordetaileddescriptions.3)Bestpracticesinclud

JavaScripthasseveralprimitivedatatypes:Number,String,Boolean,Undefined,Null,Symbol,andBigInt,andnon-primitivetypeslikeObjectandArray.Understandingtheseiscrucialforwritingefficient,bug-freecode:1)Numberusesa64-bitformat,leadingtofloating-pointissuesli

JavaScriptispreferredforwebdevelopment,whileJavaisbetterforlarge-scalebackendsystemsandAndroidapps.1)JavaScriptexcelsincreatinginteractivewebexperienceswithitsdynamicnatureandDOMmanipulation.2)Javaoffersstrongtypingandobject-orientedfeatures,idealfor
