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","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>

実行結果: