javascript - graphique carrousel natif js

Question

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

Answer 1

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: 0 A 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é.

Answer 2

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.

Answer 3

https://github.com/cubiq/Swip...
Mon premier slider était basé sur ceci, écrit par l'auteur d'IScroll

Answer 4

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.