Das jQuery-Plug-in Slider Revolution implementiert einen reaktionsschnellen Animations-Schiebebild-Umschalteffekt_jquery

Dies ist ein sehr leistungsstarkes Plug-in zum Wechseln von Inhalten. Es ist vollständig reaktionsfähig, unterstützt die Berührung von Mobiltelefonen und verfügt über integrierte Diashows und Videowiedergabe-Timer. und es verfügt über verschiedene Modi: automatische Definition, automatische Reaktion, Vollbild; es verfügt über eine Vielzahl von Animationseffekten, 3D-Effekte ... Kurz gesagt, es kann alle Effekte ausführen, die Sie sich vorstellen, und sein Name ist Slider Revolution.

HTML

Slider Revolution ist ein jQuery-basiertes Plug-in. Wenn Sie es verwenden, müssen Sie zuerst die jQuery-Bibliotheksdatei sowie die CSS- und JS-Dateien laden, von denen Slider Revolution abhängt.

<script src="js/jquery.js"></script> 
<link rel="stylesheet" href="css/style.css" media="screen" /> 
<script src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script> 
<script src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script> 

Die Haupt-HTML-Struktur des Inhaltswechsels ist wie folgt: div.tp-banner enthält mehrere

-Tags, und der Wechselinhalt wird in

platziert, einschließlich Hauptbildern, Text und Schaltflächeninformationen. Diese Informationen werden mit ihren jeweiligen Datenattributen gepaart, um von Slider Revolution erkannt zu werden.

<div class="tp-banner-container"> 
 <div class="tp-banner" > 
  <ul> 
   <!-- SLIDE --> 
   <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" > 
    <!-- MAIN IMAGE --> 
    <img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"> 
    <!-- LAYERS --> 
    <!-- LAYER NR. 1 --> 
    <div class="tp-caption lightgrey_divider skewfromrightshort fadeout" 
     data-x="85" 
     data-y="224" 
     data-speed="500" 
     data-start="1200" 
     data-easing="Power4.easeOut">My Caption 
    </div> 
    ... 
 
   </li> 
   <li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" > 
    <!-- MAIN IMAGE --> 
    <img src="images/bg2.jpg" alt="darkblurbg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"> 
    <!-- LAYERS --> 
    <!-- LAYER NR. 1 --> 
    <div class="tp-caption lightgrey_divider skewfromrightshort fadeout" 
     data-x="85" 
     data-y="224" 
     data-speed="500" 
     data-start="1200" 
     data-easing="Power4.easeOut">My Caption 
    </div> 
    ... 
   </li> 
   .... 
  </ul> 
 </div> 
</div> 

jQuery-Aufruf

Nachdem die HTML-Struktur angeordnet ist, können Sie das Slider Revolution-Plugin aufrufen. Nach dem Einfügen des obigen Codes können Sie den Browser öffnen und den Umschalteffekt sehen.

 
$(function() { 
 $('.tp-banner').revolution({ 
  delay:9000, 
  startwidth:1170, 
  startheight:500, 
  hideThumbs:10 
 }); 
}); 

Optionseinstellungen und Beschreibungen

Slider Revolution bietet viele Parameteroptionseinstellungen:
Verzögerung: die Verweildauer von gleitenden Inhalten. Standard 9000 Millisekunden
startheight: Höhe des gleitenden Inhalts, Standard 490 Pixel.
Startbreite: Breite des gleitenden Inhalts, Standard 890 Pixel.
navigationType: Zeigt das Umblättersymbol an. Der Standardwert ist „bullet“ (Punkt). Wenn „none“ eingestellt ist, wird es nicht angezeigt. .
navigationArrows: Zeigt Pfeile zum Umblättern an. Die Standardeinstellung ist „nexttobullets“, was bedeutet, dass die Pfeile zum Umblättern nach links und rechts angezeigt werden, wenn die Maus auf „Keine“ eingestellt ist.
touchenabled: Gibt an, ob Touch-Sliding zulässig ist. Wenn es auf „Off“ gesetzt ist, ist es nicht zulässig.
onHoverStop: Ob das Anhalten aktiviert werden soll, wenn die Maus bewegt wird, on: an, off: aus.
fullWidth: Ob die Vollbildanzeige von Bildinhalten aktiviert werden soll, on: an, off: aus.

Für jedes

-Tag können verschiedene Effekte eingestellt werden:
data-transition: Content-Slide-Effekt, Sie können die folgenden Werte festlegen: Boxslide, Boxfade, Slotzoom-Horizontal, Slotslide-Horizontal, Slotfade-Horizontal, Slotzoom-Vertical, Slotslide-Vertical, Slotfade-Vertical, Curtain-1, Curtain-2 , Vorhang -3, slideleft, slideright, slideup, slidedown, fade
data-slotamount: Die Anzahl der quadratischen Blöcke, in die beim Umschalten unterteilt wird.
Datenlink: Bildlink
Datenverzögerung: Legt die Verweildauer des aktuellen Slider-Inhalts fest

Für jedes Element in li können Sie die folgenden Optionen festlegen, um verschiedene Effekte zu erzielen.
Animationsstil, Klassenattribut: Der Wert des Klassenattributs stellt verschiedene Animationsstile dar: sft – Kurz von oben, sfb – Kurz von unten, sfr – Kurz von rechts, sfl – Kurz von links, lft – Lang von oben, lfb – Lang von unten , lfr – Lang von rechts, lfl – Lang von links, fade – verblassen
data-x: horizontale Verschiebung des aktuellen Elements relativ zu li
data-y: die vertikale Verschiebung des aktuellen Elements relativ zu li
Datengeschwindigkeit: Animationszeit, Millisekunden
Datenstart nach: Warten Sie einige Sekunden, bevor das aktuelle Element angezeigt wird
Datenerleichterung: Pufferanimation, einschließlich EaseOutBack ... verschiedene Animationseffekte, siehe jQuery Easing Animation Effect Extension

Wenn Sie außerdem die Zeitleiste als Timer hinzufügen möchten, können Sie am Ende des Schiebeinhalts den folgenden Code hinzufügen:

 
<div class="tp-bannertimer"></div> 

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.