Maison > interface Web > tutoriel CSS > Comment obtenir un curseur d'image en boucle infinie transparente à l'aide de JavaScript/jQuery ?

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

Susan Sarandon
Libérer: 2024-11-01 16:45:02
original
982 Les gens l'ont consulté

How to Achieve a Seamless Infinity Loop Image Slider Using 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 });
            }
        });   
     }
    
  });
});
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal