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

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" />

2.HTML-Inhalt

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

3. Funktionsaufruf

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

DEMO ansehen Herunterladen

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