jQuery-Plugin für ein nahtloses Karussell

Ein nahtloses Karussell ist ein sehr häufiger Effekt und sehr einfach, wenn man die Logik einmal verstanden hat.

Die Wirkung ist wie folgt

Codeabschnitt

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">
  <title>Nahtloses Karussell erstellen</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <Stil>
   * {
    Rand: 0;
    Polsterung: 0;
    Benutzerauswahl: keine;
   }

   #div {
    Rand: 1px durchgehend hellgrau;
    Breite: 600px;
    Höhe: 300px;
    Rand: 20px;
    Überlauf: versteckt;
   }
   .Artikel {
    Rand: 1px durchgehend hellgrau;
    Breite: 96%;
    Höhe: 50px;
    Rand: 10px automatisch;
   }
  </Stil>
 </Kopf>
 <Text>
  <div id="div">
   <div Klasse="rollbox"></div>
  </div>
 </body>
</html>
<Skript>
 $(Dokument).bereit(Funktion() {
  für (var i = 0; i < 7; i++) {
   var $item = $("<div class='item'>" + i+ "</div>");
   $item.appendTo($("#div .rollbox"));
  }
 })
 //Karussell-Aktion$(function() {
  $("#div").roll(1);
 })

 $.prototype.roll = Funktion(Spanne) {
  span = span == undefiniert? 20 : span; //Scrollrate var $that = $(this).find('.rollbox');
  Var-Index = 0;
  var t = setzeIntervall(Funktion() {
   $that.css('margin-top', index + 'px');
   Index--;
   überprüfen();
  }, Spanne)
  //
  $that.mouseenter(Funktion() {
   Intervall löschen(t);
  })
  $that.mouseleave(Funktion() {
   t = Intervall setzen(Funktion() {
    $that.css('margin-top', index + 'px');
    Index--;
    überprüfen();
   }, Spanne)
  })
  Funktion check(){
   var zuerst = $that.children().first();
   var top = parseInt(first.css('margin-top').replace('px',''));
   var bottom = parseInt(first.css('margin-bottom').replace('px',''));
   var Höhe = erste.Höhe();
   bw = parseInt(first.css('border-width').replace('px',''));
   var temp = Index+oben+Höhe+unten;
   wenn(temp==top-2*bw){
    var letztes = $das.Kinder().letztes();
    letztes.nach(erstes);
    $that.css('margin-top','0px');
    Index = 0;
   }
  }
 }
</Skript>

Erklärung der Ideen

Zuerst wollte ich das Element direkt animieren, aber die Drehungen und Wendungen in der Mitte waren etwas störend, also habe ich ihm einfach einen Hilfscontainer gegeben, um alle untergeordneten Elemente zu umhüllen, und wir haben diesen Hilfscontainer einfach auf und ab bewegt.
Das heißt, wenn Sie den Hilfscontainer langsam nach oben bewegen, tritt bereits ein Scrolleffekt auf. Anschließend stellen wir fest, ob der obere Container vollständig ausgeblendet wurde, setzen den Hilfscontainer zurück und legen das obere Element nach unten.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

12 klassische weiße, reiche und schöne Typen - JQuery-Bildkarussell-Plug-In - ein Muss für die Front-End-Entwicklung
Natives js und jquery zum Erzielen von Bildkarussell-Spezialeffekten
JQuery-Code zum Erzielen eines Bildkarusselleffekts (I)
Spezifische Implementierung des jQuery-Bildkarussells
Realisierung des Bildkarusselleffekts basierend auf JQuery (Fokusbild)
jQuery zum Erreichen zeitgesteuerter automatischer Karusselleffekte
Natives js und jquery, um den Ein- und Ausblendeffekt des Bildkarussells zu erzielen
jQuery implementiert Karussellkarte detaillierte Erklärung und Beispielcode
Verwenden von jQuery zum Schreiben von Karusselleffekten für links und rechts
jQuery implementiert nahtloses linkes und rechtes Karussell

<<: Zabbix verwendet einen gemeinsamen PSK-Schlüssel zur Verschlüsselung der Kommunikation zwischen Server und Agent

>>: Analyse der MySQL-Methode zum Exportieren nach Excel