Heim > Web-Frontend > js-Tutorial > Hauptteil

Das jQuery-Plug-in Skippr implementiert Fokusdiagramm-Folieneffekte_jquery

WBOY
Freigeben: 2016-05-16 16:04:39
Original
1241 Leute haben es durchsucht
Das beste jQuery-Plug-in für Fokusdiagramm-Diashows aller Zeiten, Skippr, leichtes Plug-in, responsives Layout-Plug-in und leistungsstarke Parameteranpassung
Konfiguration: Sie können die Umschaltgeschwindigkeit, die Umschaltmethode, die Anzeige der linken und rechten Pfeile, die automatische Wiedergabe, das automatische Wiedergabeintervall und andere Konfigurationen anpassen
Parameter und Aufruf-Plug-Ins sind ebenfalls sehr einfach und benutzerfreundlich. Die Aufrufmethode wird unten vorgestellt:
1. Laden Sie jQuery und Plug-Ins
<link rel="stylesheet" href="css/jquery.skippr.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.skippr.min.js"></script>
Nach dem Login kopieren
2.HTML-Inhalt
<div id="container"> 
    <div id="theTarget"> 
    <div style="background-image: url(img/image1.jpg)"></div> 
    <div style="background-image: url(img/image2.jpg)"></div> 
    <div style="background-image: url(img/image3.jpg)"></div> 
    <div style="background-image: url(img/image4.jpg)"></div> 
   <div style="background-image: url(img/image5.jpg)"></div> 
  </div>   
</div> 
Nach dem Login kopieren
3. Funktionsaufruf
<script> 
 $(document).ready(function(){ 
 
     $("#theTarget").skippr({ 
 
      transition: 'slide', 
      speed: 1000, 
      easing: 'easeOutQuart', 
      navType: 'block', 
      childrenElementType: 'div', 
      arrows: true, 
      autoPlay: false, 
      autoPlayDuration: 5000, 
      keyboardOnAlways: true, 
      hidePrevious: false 
    });       
 
  }); 
</script> 
Nach dem Login kopieren
Erklärung der Parameterkonfiguration
Übergang: (Fade/Slide)-Umschaltmethode
Geschwindigkeit: Schaltgeschwindigkeit (Millisekunden)
Lockerung: Schalteffekt (easeOutQuart)
navType: Unterhalb des Navigationstyps (Block/Blase)
Pfeile: Ob es Pfeile gibt (wahr/falsch)
autoPlay: Ob automatisch abgespielt werden soll (wahr/falsch)
autoPlayDuration: Autoplay-Intervall (Millisekunden)
keyboardOnAlways: Ob Tastaturumschaltung unterstützt werden soll (wahr/falsch)
hidePrevious: Ob der erste umgeschaltete Pfeil ausgeblendet werden soll (wahr/falsch)

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage