يحتوي على 3 ملفات: html، Slider-H5.js، jquery.js. يمكن تكوين المعلمات المنزلقة في HTML. الكود المحدد هو كما يلي:
كود HTML:
<!DOCTYPE HTML><html> <head> <meta charset=utf-8 /> <meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1 /> <meta name=viewport content=width = عرض الجهاز، الكثافة المستهدفة في البوصة = نقطة في البوصة العالية، المقياس الأولي = 1.0، الحد الأقصى للمقياس = 1.0، قابل للتحجيم بواسطة المستخدم = لا /> <meta name=apple-mobile-web-app-capable content=yes /> <meta name=apple-mobile-web-app-status-bar-style content=black /> <meta content=telephone=no name=format-detection /> <meta name=keywords content=seokeywords /> <meta name=description content=seodescription /> <title> قم بتمرير إصبع H5 لتبديل الصور</title> <style> ul,li{margin:0;padding:0; } @media screen and (min-width:240px) { html, body{ Font-size:9px } } @media screen and (min-width:320px) { html, body{font-size:12px; } @media screen and (min-width:480px) { html, body{ Font-size:18px } } @media screen and (الحد الأدنى للعرض: 640 بكسل) { html, body{ حجم الخط: 24px } } شاشة الوسائط و (العرض الأدنى: 960 بكسل) { html, body{ حجم الخط: 36px } } div.imgbox {width: 25rem;الارتفاع:16.5rem;التجاوز:مخفي;الهامش:0 تلقائي;} div.imgbox ul {واضح: كلاهما؛ العرض: 75ريم؛ العرض: كتلة مضمنة؛} div.imgbox ul li {تعويم: يسار؛ العرض: 25ريم؛ الارتفاع: 16.5ريم؛ الفائض: مخفي؛ محاذاة النص: المركز؛} div.imgbox ul li img{width:24rem;height:16.5rem;} #page{color:red;} </style> </head> <body> <div class=imgbox> <ul> <li> <a href=#> <img src=http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f3d8533e.jpg> < /img> </a> </li> <li> <a href=#> <img src=http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f23aad06.jpg> </img> </a> </li> <li> <a href=#> <img src=http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f345282b.jpg> </img> </a> </li> </ul> </div> <div> هنا القيمة الحالية هي يتم عرضها من خلال رد الاتصال عدد الصفحات التي سيتم التمرير إليها: <span id=page> 0 </span> </div> <script src=jquery-1.10.2yuan.js> </script> <script src=slider-H5.js> </script> <script> (function() { /* ملاحظة: في كائن التمرير الذي تم إرجاعه بواسطة $. mggScrollImg هناك ثلاث طرق: التالي، والسابق، والذهاب، والتي يمكنها تحقيق التحكم الخارجي في فهرس التمرير. على سبيل المثال:scrollImg.next();//سوف يتحول إلى الصورة التاليةscrollImg.go(0);//سوف يتحول إلى الصورة الأولى*/ var التمريرImg = $.mggScrollImg('.imgbox ul', { حلقة : صحيح، // تبديل الدورة تلقائيًا: صحيح، // التبديل التلقائي لوقت الانتظار التلقائي: 3000، // الفاصل الزمني للتمرير: 300، // رد اتصال مدة التمرير: function(ind) { // ما يتم تمريره هنا هو قيمة الفهرس $('#page').text(ind + 1 })() </script> </body></html>كود Slider-H5.js:
(function($) { /* تأثير تمرير الصورة @jQuery أو @String box: كائن أو محدد jQuery لقائمة التمرير مثل: عنصر التمرير هو الطبقة الخارجية لـ li ul @object config: { @Number width: عرض تمرير واحد، الافتراضي هو عرض العنصر الفرعي من المستوى الأول في المربع [إذا كان عرض العناصر الفرعية غير متساوٍ، فسيتم اضطراب تأثير التمرير] @Number size: طول القائمة، الافتراضي هو عدد جميع العناصر الفرعية من المستوى الأول في المربع [إذا كان الحجم لا يساوي عدد العناصر الفرعية من المستوى الأول، فإن التمرير الدائري غير مدعوم] @Boolean حلقة: ما إذا كان سيتم دعم التمرير الدائري ، الافتراضي صحيح @Boolean auto: ما إذا كان سيتم التمرير تلقائيًا، يجب دعم التمرير الدائري عند دعم التمرير التلقائي، وإلا فإن الإعداد الافتراضي هو صحيح @Number auto_wait_time: الفاصل الزمني للتدوير التلقائي، الافتراضي هو: 3000 مللي ثانية @. وظيفة رد الاتصال: بعد التمرير، تقوم وظيفة رد الاتصال بإدخال معلمة: قيمة فهرس عقدة التمرير الحالية} */ function mggScrollImg(box, config) { this.box = $(box); this.config = $.extend({}, config || {}) ; this.width = this.config.width ||. this.box.children().eq(0).width(); // عرض التمرير الواحد this.size = this.config.size || this.box.children().length; this.loop = this.config.loop !== غير محدد ? (this.config.loop == true ? true: false): صحيح // افتراضيًا، يمكن أن يكون هذا التمرير في حلقة = this.config.auto !== غير محدد ? (this.config.auto == true ? true: false): true; // التمرير التلقائي بشكل افتراضي this.auto_wait_time = this.config.auto_wait_time || 3000; // الفاصل الزمني للعرض الدائري this.scroll_time = this.config.scroll_time !== غير محدد ? (this.config.scroll_time > 0 ? this.config.scroll_time: 0) : 300; // مدة التمرير this.minleft = - this .width * (this.size - 1); // الحد الأدنى للقيمة اليسرى، لاحظ أنه رقم سالب [قيمة بدون حلقات] this.maxleft = 0; // الحد الأقصى لقيمة lfet [قيمة بدون حلقات] this.now_left = 0; // معلومات الموضع الأولي [قيمة بدون حلقات] this.point_x = null; // سجل إحداثي x this.point_y = null; تنسيق this.move_left = false; // سجل الطريقة التي سيتم تمريرها بها this.index = 0; $.extend(mggScrollImg.prototype, { init: function() { this.bind_event(); this.init_loop(); this.auto_scroll(); }, bind_event: function() { var self = this; self.box. bind('touchstart', function(e) { var t = e.touches ? e.touches: e.originalEvent.targetTouches; if (t. length == 1 && !self.busy) { self.point_x = t[0].screenX; self.point_y = t[0].screenY } }).bind('touchmove', function(e) { var t = e.touches ? e.touches: e.originalEvent.targetTouches; if (t. length == 1 && !self.busy) { return self.move(t[0].screenX, t[0].screenY); // هنا نقرر ما إذا كان سيتم حظر حدث اللمس الافتراضي بناءً على القيمة المرجعة} }).bind('touchend', function(e) { ! self.busy && self.move_end(); }); /* تهيئة التمرير الدائري عندما يلزم تمرير عناصر فرعية متعددة في وقت واحد، فإن تأثير التمرير الدائري غير مدعوم بعد. إذا كنت ترغب في تحقيق تأثير تمرير عناصر فرعية متعددة في وقت واحد، فيمكنك تنفيذ فكرة التمرير الحلقي عبر بنية الصفحة: انسخ العقدتين الأولى والأخيرة إلى النهاية*/ init_loop: function() { if (this.box .children().length > 1 && this.box.children().length == this.size && this.loop) { // يدعم حاليًا الحلقات فقط عندما يكون الحجم وعدد العقد الفرعية متساويًا this.now_left = - this.width; // تعيين معلومات الموضع الأولي this.minleft = -this.width * this.size; // الحد الأدنى للقيمة اليسرى this.maxleft = -this.width; this.box.prepend(this.box.children().eq(this.size - 1).clone()).append(this. box.children().eq(1).clone()).css(this.get_style(2)); this.box.css('width', this.width * (this.size + 2)); else { this.loop = false; this.box.css('width', this.width * this.size); if (!self.auto) return; ClearTimeout(self.timer = setTimeout(function() { self.go_index(self.index + 1); }, self.auto_wait_time); }, go_index: function(ind) { // انتقل إلى صفحة الفهرس المحددة var self = this; self .loop) { // إذا كانت الحلقة ind = ind < 0 -1 : ind = ind > self.size ? self.size: ind } else { ind = ind < 0 ? 0 : ind = ind >= self.size ? (self.size - 1) : ind } if (!self.loop && (self.now_left == -(self.width * ind)) { self. Complete(ind); else if (self.loop && (self.now_left == -self.width * (ind + 1))) { self.complete(ind } else { if (ind == -1 ||.ind == self.size) { // حد تمرير الحلقة self.index = ind == -1 ? (self.size - 1) : 0; self.now_left = ind == -1 ? : -self.width * (self.size + 1); else { self.index = ind; -(self.width * (self.index + (self.loop ? 1 : 0))); } self.box.css(this.get_style(1)); setTimeout(function() { self.complete(ind); }, self.scroll_time); // رد اتصال إكمال الرسوم المتحركة var self = this; self.busy = false; self.config.callback && self.config.callback(self.index); self.minleft } else if (ind == self.size) { self.now_left = self.maxleft } self.box.css(this.get_style(2)); () { // قم بتمرير الصفحة التالية if (!this.busy) { this.go_index(this.index + 1) } }, prev: function() { // قم بتمرير الصفحة السابقة if (!this.busy) { this.go_index(this.index - 1); } }, move: function(point_x, point_y) { // وظيفة معالجة الشاشة المنزلقة var ChangeX = point_x - (this.point_x === null ? point_x: this.point_x)، ChangeY = point_y - (this.point_y === null؟ point_y: this.point_y)، هامشleft = this.now_left، return_value = false, sin = ChangeY / Math.sqrt(changeX * ChangeX + ChangeY * ChangeY); this.now_left = هامشleft + ChangeX; this.move_left = ChangeX < 0; |.sin < -Math.sin(Math.PI / 3)) { // نطاق زاوية الشاشة المنزلقة: PI/3 - 2PI/3 return_value = true; this.point_x = point_x; this.point_y = point_y; this.box.css(this.get_style(2)); return return_value }, move_end: function() { var ChangeX = this.now_left % this.width, ind; if (this.now_left < this.minleft) { // حرك إصبعك إلى اليسار ind = this.index + 1 } else if (this.now_left > this.maxleft) { // حرك إصبعك إلى اليمين ind = this.index - 1 } else if (changeX != 0) { if (this.move_left) { // حرك إصبعك إلى اليسار ind = this. مؤشر + 1 } else { // حرك إصبعك إلى اليمين ind = this.index - 1 } } else { ind = this.index } this.point_x = this.go_index(ind) }, /* احصل على نمط الرسوم المتحركة لكي تكون متوافقًا مع المزيد من المتصفحات، يمكنك توسيع هذه الطريقة @intFig: 1 Animation 2 no Animation*/ get_style: function(fig) { var x = this.now_left, time =Fig == 1 هذا .scroll_time: 0; return { '-webkit-transition': '-webkit-transform' + time + 'ms', '-webkit-transform': 'translate3d(' + x + 'px,0,0)', '-webkit-backface-visibility': 'مخفي', 'انتقال': 'تحويل' + وقت + 'ms', 'تحويل': 'translate3d(' + x + 'px, 0,0)' }; } }); /* يوفر هذا واجهة اتصال خارجية وطريقة واجهة خارجية التالي: الصفحة التالية السابقة: الصفحة السابقة انتقل إلى الصفحة المحددة*/ $.mggScrollImg = function(box, config) { var التمريرImg = new mggScrollImg(box, config); return { // توفير الواجهة الخارجية next: function() { التمريرImg.next() }, prev: function() { التمريرImg .prev(); }, go: function(ind) { التمريرImg.go_index(parseInt(ind) || 0 }); }})(مسج)ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.