javascript - Quel est le principe du carrousel de bout en bout en JS?

Question

Les carrousels généraux sont implémentés en changeant la gauche du conteneur parent de l'image, mais qu'en est-il du principe des carrousels connectés bout à bout ?

Comment contrôler JS ?

Answer 1

Laissez-moi vous faire part de mes réflexions, j'espère que cela pourra vous aider. J'utilise Jquery.
<ul>
<li><img>1</li>
<li><img>2</li>
<li><img>3</li>
< li><img>4</li>
.....
<ul>
Obtenir toutes les balises li $("li"). Cliquez sur le bouton de déplacement vers la gauche ou la droite, et ul se déplacera vers la gauche et la droite de XX pixels (chaque li a la même taille, déplacez la largeur d'un li)
Mettez le premier $("li").eq[0] au à gauche et placez-le dans ul Last (appendTo); déplacer vers la droite place le dernier li au premier plan (prependTO).
Ajoutez des effets d'animation animate() pour le rendre meilleur.

Answer 2

Connectez-vous de bout en bout, n'est-ce pas ? J'ai déjà vu quelques principes de carrousel associés. De manière générale, le premier est basculé vers le second en bougeant un peu avec js. Ensuite, lorsqu'il s'agit du dernier, nous pouvons en ajouter un autre après la dernière. d'une image, puis passer de la dernière image au clone de la première image est également un petit changement de mouvement. Cependant, une fois la commutation terminée, elle passe immédiatement à la position de la première image réelle, qui est. gauche : 0. À ce stade, l'étape suivante consiste à passer joyeusement de la première image à la deuxième image. - - Je me demande si c'est ce que l'interrogateur a demandé ?

Answer 3

Donnez-moi une idée

Vous pouvez imaginer chaque image du composant carrousel comme un individu indépendant, plutôt que d'être connectée à d'autres images consécutives dans leur ensemble

Chaque fois que l'image est changée, l'utilisateur ne peut voir que 2 images : l'image actuelle et l'image suivante. Les images restantes, quelle que soit l'endroit où se trouve la position réelle, tant que l'utilisateur ne peut pas la voir
Donc, chaque fois qu'il a besoin de changer. , il nous suffit de préparer ces 2 images et de définir leurs animations de déplacement correspondantes. La connexion dite de bout en bout, il suffit de mettre la "tête" derrière la "queue" puis de l'animer

.

La même chose est vraie si vous souhaitez passer à l'image précédente, préparez simplement l'image actuelle et l'image précédente et définissez leur animation de déplacement

Rappel également, sur mobile il est préférable d'utiliser transform: translate3d(x, 0, 0) pour le déplacement, ce qui peut permettre l'accélération du GPU, sinon l'animation se figera

Answer 4

C'est en fait très simple. Supposons qu'il y ait cinq images originales et que la structure soit la suivante :

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
<ul>

Vous le transformez en :

<ul>
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>1</li>
<ul>

Lorsque la première image glisse vers la gauche, réinitialisez la gauche sur la cinquième image une fois l'animation terminée, et vice versa !

Answer 5

Image du carrousel Je préfère changer dynamiquement src

Answer 6

La personne qui pose la question connaît-elle les files d'attente et les piles ? Si tel est le cas, ce sera facile à expliquer. Le graphique carrousel est une file d'attente, et les éléments retirés de la file d'attente sont réintégrés dans la file d'attente

.

Answer 7

Utilisez 2 séries des mêmes images et déplacez-les dans la transition et modifiez-les à gauche.

Lorsque vous passez à la première image du deuxième groupe, désactivez directement la transition et passez à la première image du premier groupe, puis activez la transition

Answer 8

Le principe est le suivant : en supposant que vous vous déplaciez vers la gauche, après chaque déplacement, déplacez le p de l'image la plus à gauche vers la droite, c'est-à-dire déplacez le premier p vers le dernier, et en même temps modifiez la valeur de la gauche de le grand conteneur et ajoutez une La largeur de l'image.

Answer 9

Si vous utilisez jquery, vous pouvez utiliser insertAfter et insertBefore