コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 視覚的な差分効果を備えたjQueryレスポンシブカルーセル効果

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

黄舟
リリース： 2017-01-19 14:50:07
オリジナル
1523 人が閲覧しました

簡単なチュートリアル

これは、視覚的な差分効果を備えた 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 サイト (m.sbmmt.com) にご注意ください。


関連ラベル：
视觉差，jquery，响应式
ソース：php.cn
前の記事：Javascript_16_DOM_form の演習 次の記事：jquery と CSS3 を使用した弾性アニメーション効果を備えたツールバー メニュー
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
単一のグリッドまたは Flex を使用して多様なカード レイアウトを作成する: 実用的なガイド 写真のようなレスポンシブカードレイアウトを作成しようとしています。私が現在行っているのは、コンピューター、タブレット、モバイル デバイス用に個別のレイアウトを作成することです。次に...
から 2024-04-02 21:07:36
0
2
377
React.js CSS ウィンドウの幅 Reactを使用してレスポンシブWebサイトを開発しています。スタイル設定には CSS スタイルシートを使用します。応答部分は @media クエリを使用して CSS で実装されま...
から 2024-03-31 16:31:23
0
1
386
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート