Comment obtenir un curseur d'image en boucle infinie transparente à l'aide de JavaScript/jQuery ?

Concepts de conception de curseur de boucle infinie à l'aide de JavaScript/jQuery

Pour créer un curseur d'image en boucle infinie avec une lisibilité, une maintenabilité et une réutilisation optimales du code, Considérez le plan suivant :

Arrangement d'images pour l'effet de boucle infinie

Pour obtenir l'illusion d'une boucle infinie, mettez en œuvre l'une des deux approches suivantes :

• Modifier le z-index : Ajustez le z-index de chaque image à mesure que l'image suivante ou précédente devient visible.
• Modifier la position DOM : Déplacer l'image dans le DOM pour créer l'apparence d'un défilement ou d'une boucle.

Clonage d'images pour une boucle transparente

Pour créer une boucle infinie, clonez la première et la dernière images dans la séquence. Ensuite, pendant le défilement :

• Lors de la transition de l'image n à l'image 1, déplacez le conteneur vers le décalage de la première image réelle immédiatement après la fin de l'animation.
• Lors de la transition de l'image 1 à image n, déplacez le conteneur vers le décalage de la nième image réelle immédiatement après la fin de l'animation.

Exemple de code

Considérez l'extrait de code JavaScript/jQuery suivant comme un exemple de mise en œuvre :

$(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 });
            }
        });   
     }
    
  });
});

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!