recherche

Maison >interface Web >js tutoriel >Explication détaillée de la façon d'utiliser JS natif pour obtenir un effet carrousel Web mobile

Explication détaillée de la façon d'utiliser JS natif pour obtenir un effet carrousel Web mobile

巴扎黑
巴扎黑original
2017-09-11 09:26:412576parcourir

Lors du développement mobile, les images de carrousel sont indispensables. L'article suivant vous présente principalement les informations pertinentes sur l'utilisation de JS pur pour réaliser des images de carrousel Web mobile. L'important est de combiner l'algorithme Tween. La création de roues est présentée en détail via. exemple de code dans cet article. Les amis dans le besoin peuvent s'y référer.

Avant-propos

Je pense que tout le monde devrait savoir que les images carrousel sur le terminal mobile sont nos besoins les plus courants et notre moyen le plus rapide de les mettre en œuvre Il s'agit souvent d'un code tiers, tel que SWIPER, mais lorsque je rencontre des cartes de rotation plus compliquées, je ne sais souvent pas comment les modifier pour s'adapter à divers besoins complexes et changeants. c'est que s'il y a des bugs dans le code que vous écrivez, c'est facile à corriger, et cela vous améliorera grandement

Sans lire le code source du swiper, j'ai essayé de mettre en œuvre moi-même un graphique carrousel mobile simple mais pratique. . Après plusieurs heures de réflexion et de pratique, je m'en suis enfin rendu compte (comme le montre la photo) :


C'est plus compliqué à réaliser. implémenter des images de carrousel sur mobile que sur PC, principalement dans les aspects suivants :

1. Exigences relatives aux images de carrousel S'adapter aux écrans de différentes largeurs/dpr

2. Nécessité d'utiliser des événements liés au toucher

3. Différents modèles peuvent prendre en charge les événements tactiles différemment. Certains problèmes de compatibilité

4. Déplacez votre doigt sur une partie de. la distance dans l'image, et la distance restante doit être complétée automatiquement

5. L'achèvement automatique de la distance nécessite une courbe de temps de facilité

Mais les idées pour résoudre les problèmes avec les programmations sont similaires,


Nous pouvons observer attentivement lors de l'utilisation du graphique carrousel et voir l'essence à travers le phénomène :


Lorsque nous utilisons le graphique carrousel, nous pouvons observer attentivement et voir l'essence à travers le phénomène :

  • Placez votre doigt Sur l'image, déplacez votre doigt vers le à gauche ou à droite, et l'image se déplacera en conséquence ;

  • Lorsque le doigt bouge sur une petite distance, l'image revient automatiquement à sa position lorsque le doigt bouge sur une longue distance, elle change automatiquement ; à l'image suivante ;

  • Lorsque vous déplacez rapidement votre doigt vers la gauche ou la droite, il passera à l'image suivante ;

  • L'image ; le carrousel est une boucle infinie, nous devons utiliser la méthode 3 1 2 3 1 pour réaliser, c'est-à-dire N+2 images pour réaliser le carrousel à boucle infinie de N images

En analysant le phénomène, nous pouvons proposer un plan de mise en œuvre de base :

1. Les événements de toucher des doigts peuvent être réalisés à travers 3 événements : touchstart touchmove touchend

2. Lorsque le doigt touche le début, nous devons enregistrer la coordonnée x du doigt. Vous pouvez utiliser l'attribut pageX du toucher et à ce moment-là,

3. Lorsque le doigt touchmove, nous devons également enregistrer pageX et enregistrer la distance cumulée parcourue
5. Déterminez la direction du mouvement en comparant la distance de mouvement dans la direction x et si elle doit passer à l'image suivante pour juger si l'utilisateur ; a balayé vers la gauche ou la droite en fonction de l'heure


6. Déplacer les images peut être réalisé à l'aide de Translate3D, en activant l'accélération matérielle


7. Se déplacer sur une certaine distance nécessite la facilitéOut effet, nous pouvons utiliser l'algorithme easyOut dans l'algorithme Tween pour réaliser la distance que nous parcourons à chaque fois ; bien sûr, nous pouvons également utiliser l'animation de transition js Set


Code source d'implémentation (pour référence seulement ):


style de tête

HTML structure


<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width,initial-scale=.5,maximum-scale=.5"> 
 <title>移动端轮播图</title> 
 <style> 
 * { 
 box-sizing: border-box; 
 margin: 0; 
 padding: 0 
 } 
 .banner { 
 overflow: hidden; 
 width: 100%; 
 height: 300px 
 } 
 .banner .img-wrap { 
 position: relative; 
 height: 100% 
 } 
 .banner img { 
 display: block; 
 position: absolute; 
 top: 0; 
 width: 100%; 
 height: 100% 
 } 
 </style> 
</head>

Code JS 1. mouvement animé easyOut,

Ici HTMLElement.prototype.tweenTranslateXAnimate est le Méthode tweenTranslateXAnimate étendue à toutes les classes d'éléments HTML


Nous devons l'utiliser pour nous déplacer d'une certaine distance. Le minuteur nous aide à terminer cette opération répétitive
<p class="banner"> 
 <p class="img-wrap" id="imgWrap"> 
 <img src="images/banner_3.jpg" data-index="-1"> 
 <img src="images/banner_1.jpg" data-index="0"> 
 <img src="images/banner_2.jpg" data-index="1"> 
 <img src="images/banner_3.jpg" data-index="2"> 
 <img src="images/banner_1.jpg" data-index="3"> 
 </p> 
</p>



partie de l'événement tactile


<script> 
 HTMLElement.prototype.tweenTranslateXAnimate = function (start, end, callback) { 
 var duration = 50; 
 var t = 0; 
 var vv = end - start; 
 var Tween = { 
 Quad: { 
 easeOut: function (t, b, c, d) { 
  return -c * (t /= d) * (t - 2) + b; 
 } 
 } 
 }; 
 
 this.timer = setInterval(function () { 
 var dis = start + Tween.Quad.easeOut(++t, 0, vv, duration); 
 this.style.transform = &#39;translate3d(&#39; + dis + &#39;px, 0, 0)&#39;; 
 if (vv > 0 && parseInt(this.style.transform.slice(12)) >= end) { 
 this.style.transform = &#39;translate3d(&#39; + parseInt(dis) + &#39;px, 0, 0)&#39;; 
 clearInterval(this.timer); 
 callback && callback(); 
 } 
 if (vv < 0 && parseInt(this.style.transform.slice(12)) <= end) { 
 this.style.transform = &#39;translate3d(&#39; + parseInt(dis) + &#39;px, 0, 0)&#39;; 
 clearInterval(this.timer); 
 callback && callback(); 
 } 
 }.bind(this), 4); 
 } 
</script>

Le paramètre le plus critique de l'événement tactile est le paramètre pageX, qui enregistre la position de Pour que nous puissions l'utiliser dans des projets réels.

Cette démo ne fournit qu'une idée pour résoudre le problème. Avec cette idée, je crois que divers besoins complexes peuvent également être résolus...

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de js+transition pour réaliser une animation et réaliser un graphique carrousel Web mobileArticle suivant：Explication détaillée de js+transition pour réaliser une animation et réaliser un graphique carrousel Web mobile

Articles Liés

Voir plus