jQuery-Plugin zum Erzielen eines Karusselleffekts

Jeden Tag ein jQuery-Plugin - jQuery-Plugin zur Implementierung eines Karusselldiagramms. Zu Ihrer Information: Der spezifische Inhalt lautet wie folgt

Die Wirkung ist wie folgt

Codeabschnitt

.rel{
 Leerzeichen:nowrap;
 Überlauf-y: versteckt;
 Überlauf-x: automatisch;
}
.rel::-webkit-scrollbar{
 Höhe: 0px;
 Breite: 0px;
}
.img{
 Breite: 100 %;
 Höhe: 100%;
}

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">
  <title>Ein weiteres Karussell erstellen</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/zzlbt.js"></script>
  <link href="css/zzlbt.css" rel="stylesheet" type="text/css" />
  <Stil>
   *{
    Rand: 0px;
    Polsterung: 0px;
   }
   #div{
    Position: fest;
    oben: 20px;
    links: 20px;
    Breite: 400px;
    Höhe: 200px;
    Rand: 1px durchgehend hellgrau;
   }
   .div{
    Breite: 400px;
    Höhe: 200px;
    schweben: links;
    Rand: 10px;
   }
  </Stil>
 </Kopf>
 <Text>
  <div Klasse="div"></div>
  <div Klasse="div"></div>
 </body>
</html>
<Skript>
 $(Funktion(){
  $(".div").lbt({
   Daten:[
    "img/1.png",
    "img/2.png",
    "img/3.png",
    "img/4.png"
   ]
  })
 })
</Skript>

$.prototype.lbt = Funktion(Objekt) {
 obj = obj == undefiniert? {} : obj;
 obj.time = obj.time==undefiniert?1000:obj.time;
 var das = dies;
 var $das = $(dies);
 $that.arr().fürEach($item=>{
  $item.addClass("rel");
  $(Funktion(){
   //Dom hinzufügen
   obj.data.forEach(item=>{
    var $img = $("<img class='img' src='"+item+"' />");
    $img.appendTo($item);
   })
   //Karussell ausführen var index = 0;
   var Timer = Intervall festlegen(Funktion(){
    $item.stop().animate({
     'Nach links scrollen': $item.width()*index+'px'
    },500)
    index = (index+1)%obj.data.length;
   },obj.zeit)
   //Einige grundlegende Ereignisse: Wenn die Maus darüber schwebt, werden das Karussell und die Achse darunter angehalten})
  
 })
}
$.prototype.arr = Funktion() {
 var das = dies;
 var arr = [];
 für (var i = 0; i < diese.Länge; i++) {
  var $dom = $(das[i]);
  arr.push($dom);
 }
 Rückflug an;
}

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:

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
jQuery-Plugin-Folien zum Erzielen nahtloser Karusselleffekte
jQuery implementiert Karusselldiagramme und deren Prinzip im Detail erklärt
Anwendungsbeispiel für das adaptive jQuery-Karussell-Plug-In Swiper
jQuery implementiert ein nach links und rechts verschiebbares Karussell
JQuery und HTML+CSS, um ein Karussell mit kleinen Punkten und linken und rechten Schaltflächen zu erstellen
Einfache Karussellfunktion implementiert durch jQuery [für Anfänger geeignet]

<<: So laden Sie Dateien zwischen einem Linux-Server und einem Windows-System hoch und herunter

>>: Tutorial zur Installation und Konfiguration von MySQL Workbench unter CentOS