Heim > Web-Frontend > js-Tutorial > Das jQuery-Plug-in Elastislide implementiert responsive Focus Map, nahtlose Scrolling-Switching-Effekte_jquery

Das jQuery-Plug-in Elastislide implementiert responsive Focus Map, nahtlose Scrolling-Switching-Effekte_jquery

WBOY
Freigeben: 2016-05-16 16:04:45
Original
1401 Leute haben es durchsucht

Unterstützt reaktionsfähiges jQuery-Fokusbild, nahtloses Scrollen, Umschalten, Spezialeffekt-Plug-in Elastislide, ein sehr schönes Bildkarussell-Spezialeffekt-Plug-in, das linke und rechte Karussellbilder, Auf- und Ab-Karussellbilder, adaptive mobile Anzeige und zahlreiche Parameter unterstützt Konfigurationen: Ausrichtung: „horizontal“ (horizontales Schalten), Geschwindigkeit: 500 (Schaltgeschwindigkeit in Millisekunden), Beschleunigung: „ease-in-out“ (Animationseffekt), minItems: 3 (Standardanzahl der Anzeigen) usw., Browser Kompatibilität: IE8 und modernere Browser können verwendet werden, wenn Ihnen Browser mit niedrigeren Versionen nichts ausmachen. Natürlich können Sie auch mobile Touchscreens verwenden.

Unterstützt das responsive jQuery-Fokusbild-Plug-in Elastislide für nahtloses Scrollen und Umschalten von Spezialeffekten

Verwendung:

1. Laden Sie jQuery und Plug-Ins

<script type="text/javascript" src="libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquerypp.custom.js"></script> 
<script type="text/javascript" src="js/jquery.elastislide.js"></script> 
<link rel="stylesheet" type="text/css" href="css/elastislide.css" /> 
Nach dem Login kopieren

2.HTML-Inhalt

<ul id="carousel" class="elastislide-list"> 
<li><a href="#"><img src="images/small/1.jpg" alt="Das jQuery-Plug-in Elastislide implementiert responsive Focus Map, nahtlose Scrolling-Switching-Effekte_jquery" /></a></li> 
<li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li> 
<li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li> 
<li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li> 
<li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li> 
<li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li> 
</ul> 
Nach dem Login kopieren

3. Funktionsaufruf

<script type="text/javascript"> 
$(document).ready(function() { 
  $( '#carousel' ).elastislide(); 
}); 
</script> 
Nach dem Login kopieren

DEMO ansehen Herunterladen

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

Verwandte Etiketten:
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