Contient 3 fichiers : html, slider-H5.js, jquery.js. Les paramètres coulissants peuvent être configurés en HTML. Le code spécifique est le suivant :
Code 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 = largeur du périphérique, densité cible dpi = haute résolution, échelle initiale = 1,0, échelle maximale = 1,0, évolutivité utilisateur = non /> <méta 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> Faites glisser le doigt H5 pour changer d'image</title> <style> ul,li{margin:0;padding:0; } @media screen et (min-width:240px) { html, body{ font-size:9px; } } @media screen et (min-width:320px) { html, body{ font-size:12px; } } @media; écran et (min-width:480px) { html, body{ font-size:18px } } @media écran et; (min-width:640px) { html, body{ font-size:24px; } } @media screen et (min-width:960px) { html, body{ font-size:36px } } div.imgbox{width : 25rem;hauteur:16,5rem;débordement:caché;marge: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{largeur:24rem;hauteur:16.5rem;} #page{couleur:rouge;} </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> Ici, la valeur actuelle est affiché via le rappel Combien de pages faire défiler : <span id=page> 0 </span> </div> <script src=jquery-1.10.2yuan.js> </script> <script src=slider-H5.js> </script> <script> (function() { /* Remarque : sur l'objet scrollImg renvoyé par $. mggScrollImg Il existe trois méthodes : next, prev et go, qui peuvent réaliser un contrôle externe de l'index de défilement. Par exemple : scrollImg.next();//passera à l'image suivante scrollImg.go(0);//passera à la première image*/ var scrollImg = $.mggScrollImg('.imgbox ul', { loop : true, // Commutation de cycle automatique : true, // Commutation automatique auto_wait_time : 3000, // Intervalle de carrousel scroll_time : 300, // Rappel de la durée de défilement : function(ind) { //Ce qui est transmis ici est la valeur d'index $('#page').text(ind + 1 } })() </script> </body></html>);Code du curseur-H5.js :
(function ($) { /* Effet de défilement d'image @jQuery ou @String box : liste déroulante objet ou sélecteur jQuery tel que : l'élément de défilement est la couche externe de li ul @object config : { @Number width : une largeur de défilement, la valeur par défaut est la largeur de l'élément enfant de premier niveau dans la boîte [si la largeur des éléments enfants est inégale, l'effet de défilement sera désordonné] Taille @Number : Longueur de la liste, par défaut le nombre de tous les sous-éléments de premier niveau dans la boîte [si la taille n'est pas égale au nombre de sous-éléments de premier niveau, le défilement circulaire n'est pas pris en charge] @Boucle booléenne : s'il faut prendre en charge le défilement circulaire , par défaut vrai @Boolean auto : s'il faut faire défiler automatiquement, lors de la prise en charge du défilement automatique, le défilement circulaire doit être pris en charge, sinon le paramètre n'est pas valide. @Number auto_wait_time : L'intervalle de temps pour la rotation automatique, la valeur par défaut est : 3000 ms @. Rappel de fonction : Après le défilement, la fonction de rappel saisit un paramètre : la valeur actuelle de l'index du nœud de défilement} */ function mggScrollImg(box, config) { this.box = $(box); {}) ; this.width = this.config.width || this.box.children().eq(0).width(); //La largeur d'un défilement this.size = this.config.size || this.box.children().length; this.loop = this.config.loop !== undefined ? (this.config.loop == true ? true: false) : true //Par défaut, this.auto peut faire défiler en boucle = this.config.auto !== undefined ? (this.config.auto == true ? true: false) : true; //Défilement automatique par défaut this.auto_wait_time = this.config.auto_wait_time || 3000 ; //Intervalle du carrousel this.scroll_time = this.config.scroll_time !== non défini ? (this.config.scroll_time > 0 ? this.config.scroll_time : 0) : 300 ; .width * (this.size - 1); //Valeur minimale gauche, notez qu'il s'agit d'un nombre négatif [valeur sans boucle] this.maxleft = 0; //Valeur lfet maximale [valeur sans boucle] this.now_left = 0; //Informations de position initiale [valeur sans boucle] this.point_x = null; //Enregistrez une coordonnée x this.point_y = null; coordonner this.move_left = false; //Enregistrer dans quel sens glisser this.index = 0; this.busy = false this.init( ); $.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; si (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); //Ici, nous décidons s'il faut bloquer l'événement tactile par défaut en fonction de la valeur de retour} }).bind('touchend', function(e) { ! self.busy && self.move_end(); }); }, /* Initialiser le défilement circulaire lorsque plusieurs éléments enfants doivent défiler en même temps, l'effet de défilement circulaire n'est pas encore pris en charge. Si vous souhaitez obtenir l'effet de faire défiler plusieurs éléments enfants en même temps, vous pouvez implémenter l'idée de défilement en boucle à travers la structure de la page : copiez le premier et le dernier nœuds à la fin*/ init_loop : function() { if (this.box .children().length > 1 && this.box.children().length == this.size && this.loop) { // Actuellement, ne prend en charge les boucles que lorsque la taille et le nombre de nœuds enfants sont égaux this.now_left = - this.width; // Définit les informations de position initiale this.minleft = -this.width * this.size; //Valeur minimale restante 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() { //Défilement automatique var self = this; 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) { //Faites défiler jusqu'à la page d'index spécifiée var self = this; if (self.busy) return; clearTimeout(self.timer); self .loop) { //Si boucle ind = ind < 0 ? -1 : ind = ind > self.size self.size : ind } else { ind = ind < 0 ? 0 : ind; ind = ind >= self.size ? (self.size - 1) : ind; complete(ind); else if (self.loop && (self.now_left == -self.width * (ind + 1))) { self.complete(ind); == -1 || ind == self.size) { // Limite de défilement de boucle 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); // Rappel d'achèvement de l'animation var self = this; self.busy = false; self.minleft; } else if (ind == self.size) { self.now_left = self.maxleft; } self.box.css(this.get_style(2)); () { //Faites défiler la page suivante if (!this.busy) { this.go_index(this.index + 1); prev: function() { //Faites défiler la page précédente si (!this.busy) { this.go_index(this.index - 1); } }, move: function(point_x, point_y) { //Fonction de traitement d'écran coulissant 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; this.move_left = changeX < 0; | sin < -Math.sin(Math.PI / 3)) { //Plage d'angle d'écran coulissant : PI/3 -- 2PI/3 return_value = true //N'empêche pas le comportement par défaut} 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) { //Faites glisser votre doigt vers la gauche ind = this.index + 1 } else if (this.now_left > this.maxleft) { //Faites glisser votre doigt vers la droite ind = this.index - 1; } else if (changeX != 0) { if (this.move_left) { //Faites glisser votre doigt vers la gauche ind = this. index + 1; } else { //Faites glisser votre doigt vers la droite ind = this.index - 1; } } else { ind = this.index; } this.point_x = this.point_y = null; ; }, /* Récupère le style d'animation Pour être compatible avec plus de navigateurs, vous pouvez étendre cette méthode @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' : 'caché', 'transition' : 'transform ' + time + 'ms', 'transform' : 'translate3d(' + x + 'px, 0,0)' }; } }); /* Ceci fournit une interface d'appel externe et une méthode d'interface externe next : page suivante prev : page précédente aller : faire défiler jusqu'à la page spécifiée*/ $.mggScrollImg = function(box, config) { var scrollImg = new mggScrollImg(box, config); return { //Fournir une interface externe suivante : function() { scrollImg.next( }, prev : function() { scrollImg .prev(); }, allez : function(ind) { scrollImg.go_index(parseInt(ind) || 0 } } }})(jQuery)Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.