ประกอบด้วย 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 =ความกว้างของอุปกรณ์, target-densitydpi=high-dpi, มาตราส่วนเริ่มต้น=1.0, มาตราส่วนสูงสุด=1.0, ผู้ใช้ปรับขนาดได้=no /> <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 และ (min-width:240px) { html, body{ font-size:9px; } } @media screen และ (ความกว้างขั้นต่ำ:480px) { html, body{ font-size:18px; } } @media screen และ (ความกว้างขั้นต่ำ:640px) { html, body{ font-size:24px; } } @media screen และ (ความกว้างขั้นต่ำ:960px) { html, body{ font-size:36px; } } div.imgbox{width: 25rem;height:16.5rem;overflow:hidden;margin:0 auto;} div.imgbox ul {clear:both;width:75rem;display: inline-block;} div.imgbox ul li {float:left;width:25rem;height:16.5rem;overflow:hidden;text-align:center;} div.imgbox ul li img{width:24rem;height:16.5rem;} #page{color:red;} </style> </หัว> <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() { /* หมายเหตุ: บนวัตถุ scrollImg ที่ส่งคืนโดย $ mggScrollImg มีสามวิธี: ถัดไป ก่อนหน้า และไป ซึ่งสามารถรับรู้การควบคุมดัชนีการเลื่อนจากภายนอก ตัวอย่างเช่น: scrollImg.next();//จะสลับไปที่รูปภาพถัดไป scrollImg.go(0);//จะสลับไปที่รูปภาพแรก*/ var scrollImg = $.mggScrollImg('.imgbox ul', { loop : จริง // วงจรการสลับอัตโนมัติ: จริง // การสลับอัตโนมัติ auto_wait_time: 3000, // ช่วงเวลาแบบหมุน scroll_time: 300, // การโทรกลับระยะเวลาการเลื่อน: function(ind) { //สิ่งที่ส่งมาที่นี่คือค่าดัชนี $('#page').text(ind + 1); })() </script> </body></html>รหัส Slider-H5.js:
(function($) { /* Image scrolling effect @jQuery หรือ @String box: scrolling list jQuery object or selector เช่น: the scrolling element is the outer layer of li ul @object config: { @Number width: one scroll width, ค่าเริ่มต้นคือ ความกว้างขององค์ประกอบลูกระดับแรกในกล่อง [หากความกว้างขององค์ประกอบลูกไม่เท่ากัน ผลการเลื่อนจะไม่เป็นระเบียบ] @ขนาดหมายเลข: ความยาวรายการ ค่าเริ่มต้นเป็นจำนวนองค์ประกอบย่อยระดับแรกทั้งหมดในกล่อง [หากขนาดไม่เท่ากับจำนวนองค์ประกอบย่อยระดับแรก ไม่รองรับการเลื่อนแบบวงกลม] @Boolean loop: จะรองรับการเลื่อนแบบวงกลมหรือไม่ , ค่าเริ่มต้นจริง @Boolean auto: ไม่ว่าจะเลื่อนอัตโนมัติหรือไม่ เมื่อรองรับการเลื่อนอัตโนมัติ จะต้องรองรับการเลื่อนแบบวงกลม ไม่เช่นนั้นการตั้งค่าจะไม่ถูกต้อง ค่าเริ่มต้นคือ @Number auto_wait_time: ช่วงเวลาสำหรับการหมุนอัตโนมัติ ค่าเริ่มต้นคือ: 3000ms @ โทรกลับฟังก์ชัน: หลังจากการเลื่อน ฟังก์ชันเรียกกลับจะเข้าสู่พารามิเตอร์: ค่าดัชนีโหนดการเลื่อนปัจจุบัน} */ 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 !== undefinition ? (this.config.loop == true ? true: false) : true; // โดยค่าเริ่มต้น this.auto สามารถ วนซ้ำและเลื่อน = 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 !== undefinition ? (this.config.scroll_time > 0 ? this.config.scroll_time: 0) : //ระยะเวลาการเลื่อน 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; this.busy = false; this.timer; $.extend(mggScrollImg.prototype, { init: function() { this.bind_event(); this.init_loop(); this.auto_scroll(); }, bind_event: function() { var self = this; self.box. ผูก ('touchstart', ฟังก์ชั่น (e) { var t = e.touches ? e.touches: e.OriginalEvent.targetTouches; ถ้า (t.length == 1 && !self.busy) { self.point_x = t[0].screenX; self.point_y = t[0].screenY; } }).ผูก('touchmove', ฟังก์ชั่น(e) { var t = e.touches ? e.touches: e.OriginalEvent.targetTouches; if (t.length == 1 && !self.busy) { กลับ 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); } }, auto_scroll: function() { // เลื่อนอัตโนมัติ var self = this; if (!self.auto) return; clearTimeout(self.timer); self.timer = setTimeout(ฟังก์ชั่น() { self.go_index(self.index + 1); }, self.auto_wait_time); }, go_index: function(ind) { //เลื่อนไปที่หน้าดัชนีที่ระบุ var self = this; if (self.busy) return; clearTimeout(self.timer); self .loop) { // ถ้า loop ind = ind < 0 ? -1 : ind; ind = ind > self.size ? self.size: ind; 0 : ind; ind = ind >= self.size ? (self.size - 1) : ind; } if (!self.loop && (self.now_left == -(self.width * ind))) เสร็จสมบูรณ์ (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.now_left = -(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); if (ind == -1) { self.now_left = self.minleft; } else if (ind == self.size) { self.now_left = self.maxleft; } self.box.css(this.get_style(2)); self.auto_scroll( }, ถัดไป: ฟังก์ชั่น () { //เลื่อนหน้าถัดไป if (!this.busy) { this.go_index(this.index + 1); } }, prev: function() { //เลื่อนหน้าก่อนหน้า if (!this.busy) { this.go_index(this.index - 1); } }, ย้าย: 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), marginleft = this.now_left, return_value = false, sin = changeY / Math.sqrt(changeX * changeX + changeY * changeY); this.now_left = ขอบซ้าย + changeX; this.move_left = changeX < 0; if (sin > Math.sin(Math.PI / 3) | |. 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; } อื่น ๆ { // เลื่อนนิ้วของคุณไปทางขวา ind = this.index - 1; } อื่น ๆ { ind = this.index; } this.point_y = null; ; } /* รับรูปแบบภาพเคลื่อนไหว เพื่อให้เข้ากันได้กับเบราว์เซอร์มากขึ้น คุณสามารถขยายวิธีการนี้ได้ @int fig: 1 ภาพเคลื่อนไหว 2 ไม่มีภาพเคลื่อนไหว*/ 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 scrollImg = new mggScrollImg(box, config); return { //จัดเตรียมอินเทอร์เฟซภายนอก ถัดไป: function() { scrollImg.next( }, prev: function() { scrollImg .prev(); }, go: function(ind) { scrollImg.go_index(parseInt(ind) || 0); }})(เจเคอรี่)ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network