Heim  >  Artikel  >  Web-Frontend  >  JQuery-responsiver Karusselleffekt mit visuellem Differenzeffekt

JQuery-responsiver Karusselleffekt mit visuellem Differenzeffekt

黄舟
黄舟Original
2017-01-19 14:50:071459Durchsuche

Kurzes Tutorial

Dies ist ein auf JQuery reagierender Karusselleffekt mit visuellem Differenzeffekt. Das Besondere an diesem JQuery-Karussellbild ist, dass es durch Ziehen mit der Maus umgeschaltet werden kann und jedes Bild einen coolen transparenten Buchstaben hat. Das Karussellbild hat beim Schieben einen optischen Unterschiedseffekt.

Verwendung

Fügen Sie jquery, main.js und die Stildatei style.css des Karussells in die Seite ein.

<link rel="stylesheet" href="css/style.css">
<script src="path/to/jquery.min.js" type="text/javascript"></script>
<script src="js/main.js"></script>

HTML-Struktur

Die HTML-Struktur des JQuery-Karussells ist wie folgt:

<div class="cont">
  <div class="slider"></div>
  <ul class="nav"></div>
  <div data-target=&#39;right&#39; class="side-nav side-nav--right"></div>
  <div data-target=&#39;left&#39; class="side-nav side-nav--left"></div>
</div>

Im Folgenden finden Sie einige Screenshots des JQuery-Karussells.

JQuery-responsiver Karusselleffekt mit visuellem Differenzeffekt

JQuery-responsiver Karusselleffekt mit visuellem Differenzeffekt

Das Obige ist der Inhalt des auf JQuery reagierenden Karusselleffekts mit visuellem Differenzeffekt. Weitere verwandte Inhalte finden Sie unter PHP chinesische Website (www.php.cn)!


Stellungnahme:
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
Vorheriger Artikel:Javascript_16_DOM_form-ÜbungNächster Artikel:Javascript_16_DOM_form-Übung