Wie kann ich mit JavaScript/jQuery einen unendlichen Bildschleifen-Schieberegler erstellen?

Infinity-Loop-Slider-Konzepte

In diesem Artikel werden die Best Practices wie Lesbarkeit, Code-Wiederverwendbarkeit und gute Codierungspraktiken für den Aufbau eines Infinity-Image-Loops besprochen. Slider für eine Website mit JavaScript/jQuery. Der Schwerpunkt liegt auf der Anordnung der Bilder, um die Illusion eines Endlosschleifen-Schiebereglers zu erzeugen.

Implementieren eines Endlosschleifen-Schiebereglers

Eine einfache Methode zum Erstellen eines Endlosschleifen-Schiebereglers ist wie folgt: Annehmen Sie müssen „n“ Bilder in einer Schleife verschieben, wobei das erste Bild auf das n-te Bild folgt und umgekehrt. Erstellen Sie einen Klon des ersten und letzten Bildes und gehen Sie wie folgt vor:

• Hängen Sie den Klon des letzten Bildes vor dem ersten Bild an.
• Hängen Sie den Klon des ersten Bildes nach dem an letztes Bild.

Unabhängig von der Anzahl der Bilder müssen Sie höchstens zwei geklonte Elemente einfügen.

Angenommen, alle Bilder sind 100 Pixel breit und werden in einem Container mit Überlauf angezeigt: versteckt, Anzeige: inline-block und Leerraum: nowrap, der Container, der die Bilder enthält, kann einfach in einer Reihe ausgerichtet werden.

Für n = 4 würde die DOM-Struktur wie folgt aussehen:

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 ]
*/

Der Container wird zunächst mit links: -100px positioniert, sodass das erste Bild angezeigt werden kann. Um zwischen Bildern zu wechseln, wenden Sie eine JavaScript-Animation auf die ursprünglich ausgewählte CSS-Eigenschaft an.

• Wenn sich der Schieberegler auf dem 4. Bild befindet, erfordert der Wechsel zu Bild 1c eine Animation von Bild 4 zu 1c. Sobald die Animation abgeschlossen ist, positionieren Sie den Slider-Wrapper sofort am tatsächlichen Versatz des ersten Bildes neu (z. B. links einstellen: -100 Pixel zum Container).
• Ähnlich gilt: Wenn der Slider auf dem ersten Element positioniert ist, Das Ausführen der vorherigen Animation von Bild 1 bis 4c und das Verschieben des Containers zum 4. Bildversatz (links: -400 Pixel zum Container) reicht aus, um das vorherige Bild anzuzeigen.

Orchestrieren der Folienschleife

Die dazugehörige Geige demonstriert diesen Effekt. Nachfolgend finden Sie den verwendeten grundlegenden JavaScript/jQuery-Code:

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

Fazit

Diese Lösung ist relativ einfach und effizient und erfordert im Vergleich zu einer anderen Lösung nur zwei zusätzliche DOM-Einfügevorgänge und eine einfache Schleifenverwaltungslogik -Looping-Schieberegler.

Auch wenn es alternative Ansätze gibt, bietet diese Methode eine praktische und effektive Lösung zum Erstellen eines Endlosschleifen-Schiebereglers.

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript/jQuery einen unendlichen Bildschleifen-Schieberegler erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!