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

<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

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.