この記事では、呼吸カルーセル効果を実現するための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 をインストールする方法
レイアウトにul>liを使用した単一行レイアウトを以下に示します。 <ul class=...
目次概要フィルターの定義フィルターの使用カスタムグローバルフィルターローカルフィルター予防例1(ロー...
1. 準備1.1 Pythonインストールパッケージをダウンロードします(注:Pythonバージョン...
mysql-5.7.9 では、ついにシャットダウン構文が提供されます。以前は、MySQL データベー...
XHTML は CSS レイアウトの基礎です。jb51.net は常に XHTML 知識の習得を重視...
序文vue3.0 が正式にリリースされて以来、多くの友人が vue3.0 に切り替えました。ここでは...
この記事では、参考までに、echartを使用してタグと色をカスタマイズするVueの具体的なコードを紹...
JavaScriptの服装アルバム切り替え効果(Taobao商品画像切り替えに似ています)、参考ま...
必要ページング バーを追加します。これにより、ページにジャンプしたり、ページ番号に従って特定のページ...
既存のビデオ プレーヤーがニーズを満たせない場合は、ビデオを自分でカプセル化する必要があります。ビデ...
純粋なCSS3で蝶が羽ばたく様子を再現。まずはその効果をご覧ください どうですか?効果はかなりいいで...
1. left(name,4)は左の4文字をインターセプトしますリスト: SELECT LEFT(2...
1. Oracle は大規模データベースですが、MySQL は小規模から中規模のデータベースです。O...
この記事では、Echartsを使用して3次元棒グラフを実装するVueの具体的なコードを参考までに共有...
すべてがファイルです! UNIX はすでにそれを言っています。エリック・レイモンドはこう言いました。...