J'ai récemment bricolé des images de carrousel JS natives
J'ai ajouté une transition vers le switch, il y a donc un gros problème de connexion de la dernière photo à la première photo.
L'idée est d'ajouter la première image après la dernière image, puis de supprimer la première image de l'élément parent
1231 cette façon de penser
Y a-t-il un maître qui a écrit un code similaire ? Vous pouvez vous y référer
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
J'en ai fait un, basé sur la logique du démon sexuel tante Zhang.
L'arrangement est : 1 2 3 4 5 1
La dernière image passe à la première image et la dernière 1 s'affiche. Parce qu'elle est séquentielle, la glisse est douce et soyeuse.
Clé : Après 5 à 1, restaurez directement
width: 0A ce moment, il redevient l'état initial Parce que tous les 1 sont affichés, il n'y a presque aucun défaut.J'ai aussi essayé de le déplacer en fin de file d'attente à chaque fois que je le faisais glisser, mais c'était trop compliqué à mettre en œuvre et j'ai abandonné.
Pas besoin de supprimer, ajoutez simplement un nœud existant pour le déplacer. Il est alors temps de changer la barre de défilement.
https://github.com/cubiq/Swip...
Mon premier slider était basé sur ceci, écrit par l'auteur d'IScroll
Cela n'est pas nécessaire, et moins il y a d'opérations sur le nœud DOM, mieux c'est. Par exemple, si vous utilisez un tel ordre de tri 5 1 2 3 4 5 1,
Lors du défilement vers la droite. de 5 à 1, au moment où l'animation est terminée, éliminez la classe avec transition, réajustez la position au premier 1, puis réaffectez la classe avec transition, et la même chose passe de 1 à 5 vers la gauche. Le principe est d'utiliser la tromperie visuelle, car le premier 2 et le 1 après le 5 à droite ont le même style et il n'y a pas de différence, donc le but peut être atteint.