Comment puis-je créer un curseur de boucle d'image infinie à l'aide de JavaScript/jQuery ?

Concepts du curseur Infinity Loop

Cet article traite des meilleures pratiques, telles que la lisibilité, la réutilisabilité du code et les bonnes pratiques de codage, pour créer un Infinity-Image-Loop- Slider pour un site Web utilisant JavaScript/jQuery. L'accent est mis sur la façon d'organiser les images pour créer l'illusion d'un curseur de boucle sans fin.

Implémentation d'un curseur de boucle infini

Une méthode simple pour créer un curseur d'image infini est la suivante : Supposons vous avez "n" images à faire glisser en boucle, la première image suivant la nième image et vice-versa. Créez un clone de la première et de la dernière images et procédez comme suit :

• Ajoutez le clone de la dernière image avant la première image.
• Ajoutez le clone de la première image après le dernière image.

Quel que soit le nombre d'images, il vous suffit d'insérer deux éléments clonés à la plupart.

En supposant que toutes les images mesurent 100 px de large et sont affichées dans un conteneur avec débordement : caché, affichage : bloc en ligne et espace blanc : nowrap, le conteneur contenant les images peut être facilement aligné dans une rangée.

Pour n = 4, la structure DOM apparaîtrait comme suit :

offset(px)     0       100     200     300     400     500
images         |   4c   |   1   |   2   |   3   |   4   |   1c
                                                   
/*                 ^^                                       ^^
       [ Clone of the last image ]              [ Clone of the 1st image ]
*/

Initialement, le conteneur est positionné à gauche : -100px, permettant d'afficher la première image. Pour basculer entre les images, appliquez une animation JavaScript à la propriété CSS que vous avez initialement sélectionnée.

• Lorsque le curseur est sur la 4ème image, passer à l'image 1c implique d'animer de l'image 4 à 1c. Une fois l'animation terminée, repositionnez instantanément le wrapper du curseur au décalage réel de la 1ère image (par exemple, définissez à gauche : -100px sur le conteneur).
• De même, lorsque le curseur est positionné sur le 1er élément, effectuer l'animation précédente de l'image 1 à 4c et déplacer le conteneur vers le décalage de la 4ème image (à gauche : -400px par rapport au conteneur) suffit pour afficher l'animation précédente. image.

Orchestrer la boucle de diapositive

Le violon qui l'accompagne démontre cet effet. Vous trouverez ci-dessous le code JavaScript/jQuery de base utilisé :

$(function() {
 
  var gallery = $('#gallery ul'),
      items   = gallery.find('li'),
      len     = items.length,
      current = 1,  /* the item we're currently looking */
      
      first   = items.filter(':first'),
      last    = items.filter(':last'),
      
      triggers = $('button');
  
  /* 1. Cloning first and last item */
  first.before(last.clone(true)); 
  last.after(first.clone(true)); 
  
  /* 2. Set button handlers */
  triggers.on('click', function() {

    var cycle, delta;
    
    if (gallery.is(':not(:animated)')) {
     
        cycle = false;
        delta = (this.id === "prev")? -1 : 1;
        /* in the example buttons have id "prev" or "next" */  
    
        gallery.animate({ left: "+=" + (-100 * delta) }, function() {
      
            current += delta;
       
            /** 
             * we're cycling the slider when the the value of "current" 
             * variable (after increment/decrement) is 0 or when it exceeds
             * the initial gallery length
             */          
            cycle = (current === 0 || current > len);
       
            if (cycle) {
                /* we switched from image 1 to 4-cloned or 
                   from image 4 to 1-cloned */
                current = (current === 0)? len : 1; 
                gallery.css({left:  -100 * current });
            }
        });   
     }
    
  });
});

Conclusion

Cette solution est relativement simple et efficace, ne nécessitant que deux opérations d'insertion DOM supplémentaires et une logique de gestion de boucle simple par rapport à une solution non -curseur de boucle.

Bien que des approches alternatives puissent exister, cette méthode fournit une solution pratique et efficace pour créer un curseur de boucle infinie.

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!