本日ご紹介するのは、jQuery を使用してシンプルなカルーセルを実装する方法です。実装の原則は次のとおりです。 1. エリアの幅と高さを設定します。エリアがこの部分を超えると、非表示の 2. 画像サイズを300に設定し、インデックスは0から始まります。 3. 右側のボタンをクリックしたら、クリックしたボタンのインデックスに1を加算する必要があります。画像のサイズ+pxに乗じたインデックスに1を加算します。 4.スライドするときにアニメーション効果を追加すると素晴らしいものになります 5. 右側の効果は左側と同じです。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>カルーセル画像</title> <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script> <スタイル タイプ="text/css"> *{ パディング: 0; マージン: 0; } .uli{ 幅: 300ピクセル; 高さ: 300px; ディスプレイ: フレックス; オーバーフロー: 非表示; } .uli li>画像{ 位置: 相対的; 左: 0px; 上: 0px; 高さ: 300px; } .uli li{ 幅: 300ピクセル; 高さ: 300px; リストスタイル:なし; } .a1{ 位置: 絶対; 上: 100px; 左: 0; カーソル: ポインタ; フォントサイズ: 50px } .a2{ 位置: 絶対; 上: 100px; 左: 260ピクセル; カーソル: ポインタ; フォントサイズ: 50px } </スタイル> </head> <本文> <!-- ul li 内の写真とドリンクの数を設定します --> <ul class="uli"> <li><img src="./img/大冰黒茶.png" alt=""></li> <li><img src="./img/Big Honey Green Tea.png" alt=""></li> <li><img src="./img/大龙井绿茶.png" alt=""></li> </ul> <!-- 2 つの div 内の span は、右側の付箋と左側のラベルのクリック イベントを制御します --> <div class="pa1"> <span class="a1"><</span> <span class="a2"> </span> </div> <script type="text/javascript"> // エントリ関数を記述する $(function(){ // 画像サイズを設定します var img = 300; // インデックスを0に設定する var インデックス = 0; // 写真の数の長さを設定します。var option = $('.uli>li img').length; // 左の部分は $('.a2').click(function(){ で始まります // 次にイベントをクリックしてコールバック関数 left() を実行します }) // 関数名 lest 関数 left(){ // インデックスの値は 0 です。画像の長さより小さい場合は、++ オプションを実行してマイナス 1 を実行します。それ以外の場合は空白ページになります。if (index < option-1) { インデックス++ }それ以外 { インデックス = 0 } 動く() } // 左部分が終了 // 右部分が始まります $('.a1').click(function(){ // 次にイベントをクリックしてコールバック関数を実行します right() }) 関数 right(){ // インデックスの値は 0 です。画像の長さより大きい場合は、次のように実行されます。 (インデックス>0)の場合{ 索引 - }それ以外 { インデックス = オプション-1 } 動く() } // 右関数と左関数には移動関数があり、インデックスをクリックすると、時間の経過とともに画像の数が 500 個ずつスライドします。 function move(){ var a = -index * img + 'px' $('.uli li>img').animate({'left':a},500) } }) </スクリプト> </本文> </html> これが上記のコードです。小さな例で試してみることができます。 レンダリングを見てみましょう。 ビデオは再生できず、画像のみを見ることができます。 これが現状です。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Mysqlクエリ条件で文字列の末尾にスペースがあっても一致しない問題の詳細な説明
>>: インデックスとテーブルリターンをカバーするMySQLの使い方
この記事は、「24 Days of Linux Desktop」の特別シリーズの一部です。 Open...
ここでは主に、WeChat アプレットでラッキーホイール ゲームを開発する方法を紹介します。主に J...
序文MySQL データベースのデフォルトのデータベース ファイルは /var/lib/mysql に...
この記事では、省と市の簡単な連携を実現するためのJavaScriptの具体的なコードを参考までに紹介...
この記事では、スクロールウィンドウを実装するためのJavaScriptの具体的なコードを参考までに紹...
展開アニメーション効果のあるナビゲーションバーを設計してカスタマイズし、デモを作成してみました。設計...
由来: 数日前、テスターから写真を見るという要件が送られてきました。 この要件を見たとき、私は少し混...
Linux CD とはどういう意味ですか? Linux では、cd はディレクトリの変更を意味します...
社内の同僚は Nginx ログの標準出力、つまりコンソール経由の処理を必要としているため、まずログを...
導入データベース理論についてさらに学んでいくうちに、さまざまな分離レベルによって起こり得る問題につい...
この記事では、ローカル マシンに Java 8 をインストールせずに、Java 8 を使用して簡単な...
はじめに:今日は、サーバー上のMySQLにリモート接続したいと思います。使用するソフトウェアはNav...
生活の中で、インターネットはどこにでもあります。インターネットを通じてゲームをしたり、テレビ番組を見...
1. Tomcatのインストールパスを作成する mkdir /usr/local/tomcat 2....
目次システムアップデート構成Windows Update サーバーの変更自動更新を有効にして許可する...