Wie erstelle ich mit JavaScript/jQuery einen nahtlosen Bildschieberegler mit Endlosschleife?

Designkonzepte für Endlosschleifen-Schieberegler mit JavaScript/jQuery

Um einen Bild-Schieberegler mit Endlosschleife mit optimaler Lesbarkeit, Wartbarkeit und Wiederverwendbarkeit des Codes zu erstellen, Betrachten Sie den folgenden Entwurf:

Bildanordnung für den Endlosschleifeneffekt

Um die Illusion einer Endlosschleife zu erreichen, implementieren Sie einen von zwei Ansätzen:

• Z-Index ändern: Passen Sie den Z-Index jedes Bildes an, wenn das nächste oder vorherige Bild sichtbar wird.
• DOM-Position ändern: Verschieben Sie das Bild innerhalb des DOM, um den Eindruck eines Scrollens oder einer Schleife zu erzeugen.

Klonen von Bildern für eine nahtlose Schleife

Um eine Endlosschleife zu erstellen, klonen Sie das erste und das letzte Bild in der Reihenfolge. Dann beim Scrollen:

• Beim Übergang von Bild n zu Bild 1 verschieben Sie den Container unmittelbar nach Abschluss der Animation auf den Versatz des tatsächlichen ersten Bildes.
• Beim Übergang von Bild 1 zu Bild n, verschieben Sie den Container sofort nach Abschluss der Animation auf den Offset des echten n-ten Bildes.

Beispielcode

Betrachten Sie das folgende JavaScript/jQuery-Code-Snippet als eine Beispielimplementierung:

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

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit JavaScript/jQuery einen nahtlosen Bildschieberegler mit Endlosschleife?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!