この記事では、呼吸カルーセル効果を実現するためのjQueryの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 おそらく次のような考えでしょう: ブリージング カルーセルは、画像がフェードインおよびフェードアウトするカルーセルです。 プログラム: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> </head> <スタイル> *{ マージン:0; パディング:0; } 。大きい{ 幅:560ピクセル; 高さ:300px; 位置: 相対的; マージン:200px 自動; border:10px 赤一色; } .big .move{ 幅:5600ピクセル; 高さ:300px; 位置: 絶対; 左:0; トップ:0; } .big .move li{ /*float: 左;*/ リストスタイル: なし; 表示: なし; 位置: 絶対; トップ:0; 左:0; } .big ul .first{ 表示: ブロック; } 画像{ 幅:560ピクセル; 高さ:300px; } .btn div{ 幅:40px; 高さ:60px; 背景: 赤; 位置: 絶対; 上位:50%; 上マージン:-30px; } .rightbtn{ 右:0; } 。丸{ 位置: 絶対; 左:0px; 下:0px; 幅:200px; 高さ:30px; } .circle ul{ /*オーバーフロー: 非表示;*/ リストスタイル: なし; フロート: 左; } .circleUl li{ 背景: 白; フロート: 左; 右マージン:10px; 幅:20px; 高さ:20px; 境界線の半径:50%; } </スタイル> <本文> <div class="big"> <ul class="move"> <li class="first"> <img src="img/0.jpg" alt=""> </li> <li> <img src="img/1.jpg" alt=""> </li> <li> <img src="img/2.jpg" alt=""> </li> <li> <img src="img/3.jpg" alt=""> </li> </ul> <div class="btn"> <div class="leftbtn"> < </div> <div class="rightbtn"> > </div> </div> <div class="circle"> <ul class="circleUl"> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <script src="js/jquery-1.12.3.min.js"> </script> <スクリプト> // 最初のドットを赤に設定します $(".circleUl li").eq(0).css("background","red"); var インデックス = 0; $(".leftbtn").click(関数(){ // 古い画像をフェードアウトします $(".move li").eq(index).fadeOut(400); 索引 - ; if(インデックス<0){ インデックス = 3; } // 新しい画像がフェードインします $(".move li").eq(index).fadeIn(400); // インデックスに対応する小さなドットの色を変更します$(".circleUl li").eq(index).css("background","red").siblings().css("background","white"); }); $(".rightbtn").click(関数(){ $(".move li").eq(index).fadeOut(400); インデックス++; コンソールログ(インデックス); if(インデックス == 4){ インデックス = 0; } $(".move li").eq(index).fadeIn(400); $(".circleUl li").eq(index).css("background","red").siblings().css("background","white"); }); // 小さなドットのクリックイベント $(".circleUl li").click(function(){ // 最初の画像がすでに表示されているときに最初のドットをもう一度クリックしても何も起こりません if(index == $(this).index()) return; // 古い画像がフェードアウトします $(".move li").eq(index).fadeOut(400); // ドットをクリックし、そのドットのインデックスをグローバル変数インデックスに割り当てます (グローバル変数インデックスを更新します) インデックス = $(this).index(); // 新しい画像がフェードインします $(".move li").eq(index).fadeIn(400); // 小さなドットの色が変わります$(this).css("background","red").siblings().css("background","white"); }) </スクリプト> </本文> </html> 実行結果: 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: XHTML 入門チュートリアル: XHTML Web ページ画像アプリケーション
>>: Docker に MySQL と Redis をインストールする方法
多くの Web ページにはナビゲーション バーに小さな三角形があり、この機能を実装するのは実は非常に...
1. Linuxディスクの状態を確認する df -lh lsblkコマンドは、使用可能なすべてのブロ...
Ubuntu は比較的人気のある Linux デスクトップ システムです。最近、Ubuntu 20....
JSランニング三部作js実行コードは3つのステップに分かれています構文解析プリコンパイル解釈Jav...
ウェブサイトを作成している際に、flv や MP4 形式などのビデオ ファイルはローカルでは正常に再...
vueモバイル端末は、画面上で指をスライドさせる方向を判断します。具体的な内容は次のとおりです。これ...
docker logs コマンドを使用してコンテナ ログを表示できます。コマンド形式: $ dock...
皆さんもJDを使ったことがあると思います。ホームページには非常によく見られる機能があります。階段の特...
1. フロート+オーバーフロー:非表示このメソッドは主にオーバーフローを通じて BFC をトリガーし...
ストアドプロシージャ1. ストアドプロシージャを作成し、グローバル変数を表示する mysql>...
このブログは、MySQL8.0.15 を正常にインストールしたことを思い出すために書きました。以前は...
画像リンク <img src="" /> jsを使用してURLが有効...
この記事の例では、文字の出現回数をカウントするJavaScriptの具体的なコードを参考までに共有し...
時間は本当に存在するのでしょうか?時間は人間が考え出した概念に過ぎず、物事の変化を測る基準に過ぎない...
バージョンチェーンInnoDB エンジン テーブルでは、クラスター化インデックス レコードに 2 つ...