Maison > interface Web > tutoriel CSS > le corps du texte

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
889 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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!