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 を応援していただければ幸いです。

以下もご興味があるかもしれません: