ホームページ  >  記事  >  ウェブフロントエンド  >  視覚的な差分効果を備えたjQueryレスポンシブカルーセル効果

視覚的な差分効果を備えたjQueryレスポンシブカルーセル効果

黄舟
黄舟オリジナル
2017-01-19 14:50:071459ブラウズ

簡単なチュートリアル

これは、視覚的な差分効果を備えた jquery 応答性のカルーセル効果です。このjqueryカルーセル画像の特徴は、マウスドラッグで切り替えられることと、各画像にかっこいい透明文字が入っていることです。カルーセル画像は、スライド時に視覚的な差分効果をもたらします。

使い方

jquery、main.js、カルーセルのスタイルファイルstyle.cssをページに導入します。

<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 構造

jquery カルーセルの HTML 構造は次のとおりです:

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

以下は、jquery カルーセルのスクリーンショットの一部です。

視覚的な差分効果を備えたjQueryレスポンシブカルーセル効果

視覚的な差分効果を備えたjQueryレスポンシブカルーセル効果

上記は、視覚的な差分効果を備えた jquery レスポンシブカルーセル効果の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) にご注意ください。


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。