ホームページ >ウェブフロントエンド >jsチュートリアル >視覚的な差分効果を備えたjQueryレスポンシブカルーセル効果
視覚的な差分効果を備えたjQueryレスポンシブカルーセル効果
- 黄舟オリジナル
- 2017-01-19 14:50:071540ブラウズ
簡単なチュートリアル
これは、視覚的な差分効果を備えた 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='right' class="side-nav side-nav--right"></div> <div data-target='left' class="side-nav side-nav--left"></div> </div>
以下は、jquery カルーセルのスクリーンショットの一部です。
上記は、視覚的な差分効果を備えた jquery レスポンシブカルーセル効果の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) にご注意ください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。