この記事では、jQueryブリージングカルーセル制作原理の具体的なプロセスを参考までに紹介します。具体的な内容は次のとおりです。 カルーセル:カルーセル 注意:コードを使用する場合は、画像を置き換え、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"><</a> <a href="#" id="rightBtn">></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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Docker で MySQL 接続と設定ファイルの最大数を変更する
>>: HTML テーブル マークアップ チュートリアル (48): CSS で変更されたテーブル
この記事では、検証コードの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...
方法 1: スクリプト方式を使用する:共通ヘッダー ファイル head.js または共通フッター フ...
MySQL のインストールは比較的簡単なので、通常は次のステップに直接進み、注意が必要な点に集中する...
MySQL 起動エラーWindows 10 に MySQL をインストールする前は、net star...
選択ステートメントの完全な構文は次のとおりです。 選択 DISTINCT <選択リスト>...
目次序文1. スタイルの浸透1. パターン浸透とは何ですか? 2. 使い方は? 2. ミキシング1....
序文Index Condition Pushdown (ICP) は、MySQL 5.6 の新機能で...
準備1. GPUがCUDAをサポートしているかどうかを確認するlspci | grep -i nvi...
目次最初に要約: 🌲🌲 序文: 🍬🍬公開🍬🍬 🍬🍬グローバル🍬🍬 🍬🍬ボールボックス🍬🍬 🎉🎉🎉結論...
1. シェルスクリプトcrontab.shを書く #!/bin/bash step=1 #ステップ間...
基礎1. スキャフォールディングを使用してプロジェクトを作成し、開始する1.1 足場を設置する: n...
場合によっては、特定の条件に基づいて Web ページ内の HTML 要素を表示するか非表示にするかを...
序文最初はCentOS8でwgetを使ってダウンロードし、解凍して環境変数を設定するつもりだったので...
複数テーブルクエリ複数のテーブルから関連するクエリ結果を取得するには、単一の SELECT ステート...
成果を達成する実装コードhtml <div id="コンテナ"> &...