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 で変更されたテーブル

推薦する

静的ウェブサイトをRSSに変換するツール

<br /> この記事は allwebdesignresources.com から Ra...

Keepalived を使用して Nginx の自動再起動とデュアルアクティブ ホットスタンバイの高可用性を実現する方法について

目次1. 概要2. Keepalivedを使用してNginxを自動的に再起動する2.1 シェルスクリ...

MySQL インデックスのパフォーマンス最適化の問題に対する解決策

MySQL によって作成される最適化はインデックスを追加することですが、インデックスを追加しても目的...

MySQL テーブルがロックされているかどうかを照会する方法

具体的な方法: (推奨チュートリアル:MySQLデータベース学習チュートリアル)テーブルロックの状態...

VueはElement el-uploadコンポーネントを使用してピットに足を踏み入れます

目次1. 基本的な使い方2. 画像量の制御3. 画像形式の制限/複数の画像を選択可能補足: vueプ...

Vueブラウザが監視を再開するための具体的な手順

序文ページを共有するときに、ブラウザの戻るボタンをクリックしてプロジェクトのホームページに戻り、訪問...

2017 最新バージョンの Windows インストール MySQL チュートリアル

1. まず、MySQL の公式サイトから最新バージョンの MySQL をダウンロードします。リンクを...

時刻を保存するために適切な MySQL の datetime 型を選択する方法

データベースを構築してプログラムを書くとき、日付と時刻の使用は避けられません。データベースには、ti...

簡単な手順で純粋な CSS3 で 3D 反転効果を実現

フロントエンド開発者の必須科目であるCSS3は、多くの基本的なアニメーション効果を実現するのに役立ち...

Linuxでpyファイルを直接実行する方法

1. まずファイルを作成します(ファイルを配置するディレクトリにcdします) myTest.py を...

Mysql マスタースレーブ同期 Last_IO_Errno:1236 エラー解決

Mysql マスタースレーブ同期の Last_IO_Errno:1236 エラーの原因は何ですか? ...

Xiaomi公式サイトの登録・ログイン機能を模倣するJavaScript

目次まずページレイアウトを構築する必要がありますJS関数1 JS関数2 JS関数3 JS関数4効果図...

システム外のフォント参照とトランジション効果

コードをコピーコードは次のとおりです。 <span style="font-fami...

Windows と Linux 間のリモート デスクトップ接続

Linux へのリモート デスクトップ接続といえば、まず VNC の使用を思い浮かべるかもしれません...

CSS で隠し要素を実現する 7 つの興味深い方法

序文非表示要素の 3 つの属性である表示、可視性、不透明度の類似点と相違点は、フロントエンドの就職面...