jQuery で呼吸カルーセル効果を実現

jQuery で呼吸カルーセル効果を実現

この記事では、呼吸カルーセル効果を実現するためのjQueryの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

おそらく次のような考えでしょう:

ブリージング カルーセルは、画像がフェードインおよびフェードアウトするカルーセルです。
ul を div に格納します (相対位置を設定します)。li には float: left は必要なく、絶対位置を設定するだけです。左:0、上:0。
このとき、すべての写真の後に false 0 を追加する必要はありません。
div には、左ボタンと右ボタン、およびその下の小さなドットも含まれます。これらは、絶対位置指定によって適切な位置に配置できます。
インデックスを 0 に設定します。右ボタンをクリックすると、現在の画像がフェードアウトし、インデックス ++ になります。画像が最後の場合、インデックスは 0 に設定され、新しい画像がフェードインします。下の小さな点は色に対応しています。
左ボタンのアイデアもほぼ同じです。
下の小さな画像をクリックした際に、クリックしたインデックスが現在表示されているインデックスと同じであれば、何もする必要はありません。
他のドットをクリックすると、古い画像がフェードアウトし、現在のドットのインデックスがグローバル変数インデックスに割り当てられ、新しい画像がフェードインします。
クリックしたドットの色は変わりますが、その兄弟要素は元の色のままです。

プログラム:

<!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","re​​d");

    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","re​​d").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","re​​d").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","re​​d").siblings().css("background","white");



    })
</スクリプト>

</本文>
</html>

実行結果:

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jQuery は呼吸カルーセルを実装します
  • ブリージングカルーセルを実装するネイティブJS

<<:  XHTML 入門チュートリアル: XHTML Web ページ画像アプリケーション

>>:  Docker に MySQL と Redis をインストールする方法

推薦する

小さな三角形の実装コードを含む CSS ナビゲーション バー メニュー

多くの Web ページにはナビゲーション バーに小さな三角形があり、この機能を実装するのは実は非常に...

Linux システムでのルート ディレクトリ拡張の概要

1. Linuxディスクの状態を確認する df -lh lsblkコマンドは、使用可能なすべてのブロ...

VMware仮想マシンを使用してUbuntu 20.04をインストールする完全なチュートリアル

Ubuntu は比較的人気のある Linux デスクトップ システムです。最近、Ubuntu 20....

JavaScriptのプリコンパイルを見てみましょう(概要)

JSランニング三部作js実行コードは3つのステップに分かれています構文解析プリコンパイル解釈Jav...

ウェブサイト上で flv/MP4 やその他のビデオ ファイルを再生できない問題は、MIME タイプに関連しています。

ウェブサイトを作成している際に、flv や MP4 形式などのビデオ ファイルはローカルでは正常に再...

Vueモバイル端末は画面上で指をスライドさせる方向を判定する

vueモバイル端末は、画面上で指をスライドさせる方向を判断します。具体的な内容は次のとおりです。これ...

docker ログ - docker コンテナ ログの実装を表示します

docker logs コマンドを使用してコンテナ ログを表示できます。コマンド形式: $ dock...

階段を転がす特殊効果を実現する JavaScript (jQuery 実装)

皆さんもJDを使ったことがあると思います。ホームページには非常によく見られる機能があります。階段の特...

CSS を使用して固定左列と適応右列の 2 列レイアウトを実現する 4 つの方法

1. フロート+オーバーフロー:非表示このメソッドは主にオーバーフローを通じて BFC をトリガーし...

MySQL ストアド プロシージャの in、out、inout パラメータの例と概要

ストアドプロシージャ1. ストアドプロシージャを作成し、グローバル変数を表示する mysql>...

MySQL 8.0.15 のインストールと設定のグラフィックチュートリアルと Linux でのパスワード変更

このブログは、MySQL8.0.15 を正常にインストールしたことを思い出すために書きました。以前は...

HTML に画像が存在しない場合にデフォルトの画像を表示する方法の例

画像リンク <img src="" /> jsを使用してURLが有効...

JavaScriptは文字の出現回数をカウントします

この記事の例では、文字の出現回数をカウントするJavaScriptの具体的なコードを参考までに共有し...

MySQL の時間設定に関する考慮事項の詳細な要約

時間は本当に存在するのでしょうか?時間は人間が考え出した概念に過ぎず、物事の変化を測る基準に過ぎない...

MySQL の簡単な分析 - MVCC

バージョンチェーンInnoDB エンジン テーブルでは、クラスター化インデックス レコードに 2 つ...