jQueryブリージングカルーセルの制作原理を詳しく解説

jQueryブリージングカルーセルの制作原理を詳しく解説

この記事では、jQueryブリージングカルーセル制作原理の具体的なプロセスを参考までに紹介します。具体的な内容は次のとおりです。

カルーセル:カルーセル
ブリージング カルーセル バリアント レイアウトの重要なポイント: すべての画像が積み重ねられています。
jQuery の要素選択機能は非常に優れていますが、私たちは使用する要素を事前に変数に保存することに慣れています。通常、要素を選択するには id を使用します。通常は $box を使用します。
左右のボタンの誤作動を防ぐ戦略:画像が動いているときは、操作は実行されません。は()
Dot の不正行為対策: 新しいインシデントに即座に対応します。停止(真)

注意:コードを使用する場合は、画像を置き換え、jQuery ライブラリを導入する必要があります。

例:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <title>ドキュメント</title>
 <スタイル タイプ="text/css">
  * {
   マージン: 0;
   パディング: 0;
  }
  ul、ol {
   リストスタイル: なし;
  }
  #カルーセル {
   位置: 相対的;
   幅: 900ピクセル;
   高さ: 540px;
   境界線: 1px実線 #000;
   マージン: 50px 自動;
  }
  /*呼吸カルーセルのレイアウトの鍵は、すべての写真をまとめることです*/
  #カルーセル .imgs ul li {
   位置: 絶対;
   幅: 100%;
   高さ: 100%;
   左: 0;
   上: 0;
   表示: なし;
  }
  #カルーセル .imgs ul li:first-child {
   表示: ブロック;
  }
  .btns {
   位置: 絶対;
   幅: 30ピクセル;
   高さ: 60px;
   上位: 50%;
   上マージン: -30px;
   テキスト装飾: なし;
   背景色: rgba(0, 0, 0, .5);
   行の高さ: 60px;
   テキスト配置: 中央;
   フォントサイズ: 20px;
   色: #fff;
  }
  .btns a:最初の子 {
   左: 10px;
  }
  .btns a:最後の子 {
   右: 10px;
  }
  #カルーセル.circles{
   位置: 絶対;
   幅: 200ピクセル;
   高さ: 20px;
   左: 50%;
   左マージン: -100px;
   下: 30px;
  }
  #カルーセル .circles ol {
   幅: 210ピクセル;
  }
  #カルーセル .circles ol li {
   フロート: 左;
   幅: 20px;
   高さ: 20px;
   右マージン: 10px;
   背景色: 青;
   行の高さ: 20px;
   テキスト配置: 中央;
   境界線の半径: 20px;
  }
  #カルーセル .circles ol li.cur {
   背景色: オレンジ;
  }
 </スタイル>
</head>
<本文>
 <div id="カルーセル">
  <div class="imgs" id="imgs">
   <ul>
    <li><img src="images/aoyun/0.jpg" alt=""></li>
    <li><img src="images/aoyun/1.jpg" alt=""></li>
    <li><img src="images/aoyun/2.jpg" alt=""></li>
    <li><img src="images/aoyun/3.jpg" alt=""></li>
    <li><img src="images/aoyun/4.jpg" alt=""></li>
    <li><img src="images/aoyun/5.jpg" alt=""></li>
    <li><img src="images/aoyun/6.jpg" alt=""></li>
   </ul>
  </div>
  <div class="btns">
   <a href="#" id="leftBtn">&lt;</a>
   <a href="#" id="rightBtn">&gt;</a>
  </div>
  <div class="circles" id="circles">
   <オル>
    <li class="cur">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
   </ol>
  </div>
 </div>
 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
 <script type="text/javascript">
 // 要素を取得します var $leftBtn = $("#leftBtn");
 var $rightBtn = $("#rightBtn");
 var $imgs = $("#imgs ul li");
 var $circles = $("#circles ol li");
 var $carousel = $("#carousel");
 // 長さを定義する
 var 長さ = $imgs.length;
 // セマフォを定義します var idx = 0;


 // タイマーを開始します var timer = setInterval(change, 2000);


 //マウスでタイマーを停止します$carousel.mouseenter(function() {
  // タイマーをクリアします clearInterval(timer);
 })

 // マウスが離れたらタイマーを再開する$carousel.mouseleave(function() {
  // テーブルを閉じるように設定します clearInterval(timer);
  // タイマーを再割り当てする
  タイマー = setInterval(変更、2000);
 })


 //右ボタンイベント $rightBtn.click(change);

 関数変更() {
  // アンチローグイフ ($imgs.is(":animated")) {
   戻る;
  }
  // 現在の画像が消えます $imgs.eq(idx).fadeOut(600);

  //セマフォの変更 idx++;
  // 境界の決定 if (idx > length - 1) {
   idx = 0;
  }

  // 次の画像がフェードインします $imgs.eq(idx).fadeIn(600);

  // 現在のドットはcurを追加する必要があります
  $circles.eq(idx).addClass("cur").siblings().removeClass("cur");
 }

 // 左ボタンイベント $leftBtn.click(function() {
  // アンチローグイフ (!$imgs.is(":animated")) {

   // 現在の画像が消えます $imgs.eq(idx).fadeOut(600);

   // セマフォの変更 idx--;

   // 境界決定 if (idx < 0) {
    idx = 長さ - 1;
   }

   // 次の画像がフェードインします $imgs.eq(idx).fadeIn(600);

   // 現在のドットと現在の
   $circles.eq(idx).addClass("cur").siblings().removeClass("cur");
  }
 })



 // 小さなドットイベント $circles.mouseenter(function() {
  // 現在の画像が消えます $imgs.eq(idx).stop(true).fadeOut(600);

  // セマフォを変更 idx = $(this).index();

  // 次の画像が表示されます $imgs.eq(idx).stop(true).fadeIn(600);

  // 現在のドットと現在の
  $(this).addClass("cur").siblings().removeClass("cur");
 })

 </スクリプト>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • マクスウェル方程式から波動方程式までのPython光学シミュレーションベクトルアルゴリズムの理解と学習
  • Python 光学シミュレーション学習回折アルゴリズムの予備的理解
  • Python 光学シミュレーション: 光干渉の理解と学習
  • Python numpy における行列の基本的な使用法のまとめ
  • Python での一般的な行列演算 (要約)
  • Python 光学シミュレーションの理解 ジョーンズ行列学習

<<:  Docker で MySQL 接続と設定ファイルの最大数を変更する

>>:  HTML テーブル マークアップ チュートリアル (48): CSS で変更されたテーブル

推薦する

検証コードケースのJavaScript実装

この記事では、検証コードの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...

複数の HTML ページで HTML コードをまとめて呼び出す方法

方法 1: スクリプト方式を使用する:共通ヘッダー ファイル head.js または共通フッター フ...

Win7 での mysql5.5 インストール グラフィック チュートリアル

MySQL のインストールは比較的簡単なので、通常は次のステップに直接進み、注意が必要な点に集中する...

Windows システムで MySQL が起動しない場合の一般的な解決策

MySQL 起動エラーWindows 10 に MySQL をインストールする前は、net star...

MySQL ステートメントの実行順序と書き込み順序の例の分析

選択ステートメントの完全な構文は次のとおりです。 選択 DISTINCT <選択リスト>...

Vueプロジェクトでlessを使用するためのヒント

目次序文1. スタイルの浸透1. パターン浸透とは何ですか? 2. 使い方は? 2. ミキシング1....

MySQL インデックス プッシュダウン (ICP) の簡単な理解と例

序文Index Condition Pushdown (ICP) は、MySQL 5.6 の新機能で...

Ubuntu 16.04 に nvidia ドライバー + CUDA + cuDNN をインストールする詳細なチュートリアル

準備1. GPUがCUDAをサポートしているかどうかを確認するlspci | grep -i nvi...

Vue3 を使用してポップアップ コンポーネントをカプセル化するのは簡単ですか?

目次最初に要約: 🌲🌲 序文: 🍬🍬公開🍬🍬 🍬🍬グローバル🍬🍬 🍬🍬ボールボックス🍬🍬 🎉🎉🎉結論...

Linux Crontab シェル スクリプトを使用して第 2 レベルのスケジュールされたタスクを実装する方法

1. シェルスクリプトcrontab.shを書く #!/bin/bash step=1 #ステップ間...

React+Ant Design開発環境をセットアップするための実装手順

基礎1. スキャフォールディングを使用してプロジェクトを作成し、開始する1.1 足場を設置する: n...

表示または可視性によってHTML要素を非表示にする

場合によっては、特定の条件に基づいて Web ページ内の HTML 要素を表示するか非表示にするかを...

CentOS8 jdk8 / java8 のインストールチュートリアル(推奨)

序文最初はCentOS8でwgetを使ってダウンロードし、解凍して環境変数を設定するつもりだったので...

MySQL データベースの詳細な説明 - 複数テーブル クエリ - 内部結合、外部結合、サブクエリ、相関サブクエリ

複数テーブルクエリ複数のテーブルから関連するクエリ結果を取得するには、単一の SELECT ステート...

純粋な CSS ドロップダウン メニュー

成果を達成する実装コードhtml <div id="コンテナ"> &...