À propos de la création d'images de carrousel dans H5

Je suis nouveau dans le front-end et j'aimerais partager le processus de mise en œuvre du carrousel à écran tactile sur les téléphones mobiles. Les fonctions générales sont les suivantes : prend en charge la largeur de glissement cyclique, qui peut être définie arbitrairement. , et n'a pas besoin d'avoir la même largeur que l'écran. La page peut défiler verticalement et des rappels peuvent être définis pour surveiller la commutation des éléments, sans aucun principe de bibliothèque tierce. L'élément enfant .item mesure 375 px. Utilisez le positionnement absolu pour placer tous les éléments enfants dans l'élément parent. Définissez la largeur de l'élément parent .carousel sur 375 px, ce qui correspond à la même largeur que l'élément enfant .item. element .carousel : touchstart, touchmove, touchend. Lorsque le doigt est enfoncé, la position initiale (clientX) est enregistrée. Lorsque le doigt glisse, la direction de glissement est déterminée par la distance de glissement : lorsque le doigt glisse vers la gauche, le courant. L'élément courant et l'élément courant sont déplacés en même temps. Si le doigt de l'élément de droite glisse vers la droite, l'élément courant et l'élément à gauche de l'élément courant seront déplacés simultanément. à gauche de l'élément actuel est soulevé, il sera jugé par la distance de glissement s'il faut passer à la page suivante. La distance de mouvement ne dépasse pas 50 % de la largeur de l'élément enfant et la page actuelle sera restaurée. . Revenir à la position initiale sans changer l'élément actuel. Si la distance de déplacement dépasse 50% de la largeur de l'élément enfant, passez de l'élément actuel à l'élément suivant

1 Un exemple de tutoriel d'implémentation d'un carrousel (version écran tactile) à l'aide. H5

Introduction : Je suis nouveau dans le front-end. carrousel à écran tactile sur les téléphones mobiles. Les fonctions générales sont les suivantes : Prend en charge la largeur de glissement cyclique, qui peut être définie arbitrairement. La page n'a pas besoin d'avoir la même largeur que l'écran. Elle peut défiler verticalement. surveillez la commutation des éléments. Pure js, sans aucun principe de bibliothèque tierce. Supposons que la largeur du sous-élément .item est de 375 pixels et utilisez le positionnement absolu pour tout déplacer. Placez l'élément enfant dans l'élément parent et définissez la largeur. de l'élément parent .carousel à 375px, soit la même largeur que l'élément enfant .item. Ajoutez un événement tactile à l'élément parent .carousel : touchsta...

2. Détails sur la façon d'utiliser H5 pour implémenter le carrousel à écran tactile

Introduction : Cet article principalement présente comment utiliser H5 pour implémenter une version à écran tactile du carrousel. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Venez jeter un œil avec l'éditeur

3 Vous apprendre étape par étape comment implémenter un carrousel à l'aide de jQyery

Introduction : Je pense que tout le monde verra l'effet d'un carrousel sur les principaux sites Web, donc je ne peux m'empêcher de vouloir en créer un moi-même. J'ai vérifié les informations. et j'ai vu Après avoir compris le principe du carrousel, j'ai lentement essayé de le faire. L'effet final était à peine adéquat, mais je veux quand même le résumer. Cela peut être utile aux amis dans le besoin.

【Recommandations de questions et réponses associées】 :

javascript - js utilise setInterval pour implémenter la fonction de carrousel d'images automatique, la vitesse devient-elle de plus en plus rapide ?

xcode - Exception du cadre du carrousel d'images iOS

ios - SDScrollview ne peut pas afficher le carrousel lorsqu'il est utilisé avec Masonry ?

javascript - problème de carrousel jq

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!