Enthält 3 Dateien: html, slider-H5.js, jquery.js. Schiebeparameter können in HTML konfiguriert werden. Der spezifische Code lautet wie folgt:
HTML-Code:
<!DOCTYPE HTML><html> <head> <meta charset=utf-8 /> <meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1 /> <meta name=viewport content=width =device-width, target-densitydpi=high-dpi, initial-scale=1.0, Maximum-scale=1.0, user-scalable=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-Finger streichen, um Bilder zu wechseln</title> <style> ul,li{margin:0;padding:0; } @media screen und (min-width:240px) { html, body{ font-size:9px } } @media screen und (min-width:320px) { html, body{ font-size:12px; screen and (min-width:480px) { html, body{ font-size:18px } } @media screen and (min-width:640px) { html, body{ Font-Size:24px } } @media screen und (min-width: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> </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> Hier ist der aktuelle Wert Wird durch einen Rückruf angezeigt. Zu wie vielen Seiten gescrollt werden soll: <span id=page> 0 </span> </div> <script src=jquery-1.10.2yuan.js> </script> <script src=slider-H5.js> </script> <script> (function() { /* Hinweis: für das von $ zurückgegebene scrollImg-Objekt. mggScrollImg Es gibt drei Methoden: next, prev und go, mit denen eine externe Steuerung des Bildlaufindex realisiert werden kann. Zum Beispiel: scrollImg.next();//wechselt zum nächsten Bild scrollImg.go(0);//wechselt zum ersten Bild*/ var scrollImg = $.mggScrollImg('.imgbox ul', { loop : true, //Zyklusumschaltung automatisch: true, //Automatische Umschaltung auto_wait_time: 3000, //Karussellintervall scroll_time: 300, //Scrolldauer-Callback: function(ind) { //Was hier übergeben wird, ist der Indexwert $('#page').text(ind + 1); } })() </script> </body></html>slider-H5.js-Code:
(function($) { /* Bild-Scroll-Effekt @jQuery oder @String-Box: Scroll-Liste jQuery-Objekt oder -Selektor wie: Das Scroll-Element ist die äußere Ebene von li ul @object config: { @Number-Breite: eine Scroll-Breite, Der Standardwert ist Die Breite des untergeordneten Elements der ersten Ebene im Feld [Wenn die Breite der untergeordneten Elemente ungleichmäßig ist, wird der Bildlaufeffekt gestört] @Number-Größe: Listenlänge, standardmäßig die Anzahl aller Unterelemente der ersten Ebene im Feld [wenn die Größe nicht der Anzahl der Unterelemente der ersten Ebene entspricht, wird kreisförmiges Scrollen nicht unterstützt] @Boolesche Schleife: Gibt an, ob kreisförmiges Scrollen unterstützt werden soll , Standard true @Boolean auto: Ob automatisch gescrollt werden soll. Bei der Unterstützung des automatischen Scrollens muss kreisförmiges Scrollen unterstützt werden, andernfalls ist die Einstellung true @Number auto_wait_time: Das Zeitintervall für die automatische Drehung, der Standardwert ist: 3000 ms @. Funktionsrückruf: Nach dem Scrollen gibt die Callback-Funktion einen Parameter ein: den aktuellen Scroll-Knoten-Indexwert} */ function mggScrollImg(box, config) { this.box = $(box); this.config = $.extend({}, config || {}) ; this.width = this.config.width ||. this.box.children().eq(0).width(); //Die Breite eines Bildlaufs this.size = this.config.size || this.box.children().length; this.loop = this.config.loop !== undefiniert ? (this.config.loop == true ? true: false) : //Standardmäßig kann this.auto loop and scroll = this.config.auto !== undefiniert ? (this.config.auto == true ? true: false) : true; //Automatisches Scrollen standardmäßig this.config.auto_wait_time || 3000; //Karussellintervall this.config.scroll_time !== undefiniert ? (this.config.scroll_time > 0 ? this.config.scroll_time: 0) : 300; //Scrolldauer this.minleft = - this .width * (this.size - 1); // Minimaler linker Wert, beachten Sie, dass es sich um eine negative Zahl handelt [Wert ohne Schleife] this.maxleft = 0; //Maximaler lfet-Wert [Wert ohne Schleife] this.now_left = 0; //Anfangspositionsinformationen [Wert ohne Schleife] this.point_x = null; //Eine x-Koordinate aufzeichnen this.point_y = null; Koordinaten this.move_left = false; //Zeichnen Sie auf, in welche Richtung Sie schieben möchten 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); //Hier entscheiden wir, ob das Standard-Touch-Ereignis basierend auf dem Rückgabewert blockiert wird} }).bind('touchend', function(e) { ! self.busy && self.move_end( }); zirkuläres Scrollen initialisieren Wenn mehrere Unterelemente gleichzeitig gescrollt werden müssen. Wenn Sie den Effekt erzielen möchten, dass mehrere untergeordnete Elemente gleichzeitig gescrollt werden, können Sie die Idee des Schleifenscrollens durch die Seitenstruktur implementieren: Kopieren Sie den ersten und letzten Knoten an das Ende*/ init_loop: function() { if (this.box .children().length > 1 && this. box.children().length == this.size && this.loop) { // Unterstützt derzeit nur Schleifen, wenn Größe und Anzahl der untergeordneten Knoten gleich sind this.now_left = - this.width; //Legen Sie die Anfangspositionsinformationen fest this.minleft = -this.width * this.size; //Minimaler linker Wert this.maxleft = -this.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); self.timer = setTimeout(function() { self.go_index(self.index + 1); }, self.auto_wait_time); }, go_index: function(ind) { //Scrollen Sie zur angegebenen Indexseite var self = this; clearTimeout(self.busy = true; self .loop) { //If loop ind = ind > self.size } else { ind = ind < 0 ? 0 : ind; 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) { //Loop-Scrolling-Grenze self.index == -1 : 0; : -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 //Animationsabschluss-Callback var self = this; 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)); () { //Scrollen Sie zur nächsten Seite, wenn (!this.busy) { this.go_index(this.index + 1); }, prev: function() { //Scrollen Sie zur vorherigen Seite, wenn (!this.busy) { this.go_index(this.index - 1); } }, move: function(point_x, point_y) { //Sliding Screen Processing Function 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 = marginleft + changeX; if (sin > Math.sin(Math.PI / 3) | |. sin < -Math.sin(Math.PI / 3)) { //Scroll-Bildschirmwinkelbereich: PI/3 -- 2PI/3 return_value = true; this.point_x = point_x; this.point_y = point_y; this.get_style(2)); if (this.now_left < this.minleft) { //Bewege deinen Finger nach links ind = this.index + 1 } else if (this.now_left > this.maxleft) { //Schiebe deinen Finger nach rechts ind = this.index - 1; } else if (changeX != 0) { if (this.move_left) { //Schiebe deinen Finger nach links ind = this. index + 1; } else { //Schiebe deinen Finger nach rechts ind = this.index - } } else { ind = this.point_y = null; ; }, /* Den Animationsstil abrufen. Um mit mehr Browsern kompatibel zu sein, können Sie diese Methode erweitern @int fig: 1 animation 2 no animation*/ get_style: function(fig) { var x = this.now_left, time = fig == 1 ? this .scroll_time: 0; return { '-webkit-transition': '-webkit-transform' + time + 'ms', '-webkit-transform': 'translate3d(' + x + 'px,0,0)', '-webkit-backface-visibility': 'hidden', 'transition': 'transform ' + time + 'ms', 'transform': 'translate3d(' + x + 'px, 0,0)' }; } }); /* Dies stellt eine externe Aufrufschnittstelle und eine externe Schnittstellenmethode bereit next: nächste Seite prev: vorherige Seite go: zur angegebenen Seite scrollen*/ $.mggScrollImg = function(box, config) { var scrollImg = new mggScrollImg(box, config); return { //Externe Schnittstelle bereitstellen next: function() { scrollImg.next(}, prev: function() { scrollImg .prev(); }, go: function(ind) { scrollImg.go_index(parseInt(ind) || 0); }})(jQuery)Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.