jQuery を使用してカルーセル効果を実装する

 var j = 0;//インデックスを定義します。画像と小さなドットは共有されます var cusTimer;//タイミング関数を定義します $('.cons-middle .cons-mid').eq(0).show().siblings().hide();//デフォルトの表示画像を定義します。これは、インデックス 0 の画像です cusStart();//タイマーを使用して、画像カルーセルの実装を開始します $('.luobo-circle li').hover(function(){//マウスが小さなドットに移動すると、画像が切り替わります clearInterval(cusTimer);//タイミングをクリアします j=$(this).index();//マウスが現在移動している小さなドットのインデックスを取得します cusChange();//画像を切り替える関数を実行します });
        $('.luobo-circle li').mouseleave(function(){
            cusStart(); //マウスが小さな点から離れると、タイミング関数が引き続き実行され、カルーセルが開始されることを定義します });
        
        $('.cons-left img').click(() => {
            j--;
            (j < 0) の場合 {
                3 = 0;
            };
            cusChange();
            $('.luobo-circle li').eq(j).css('背景色','#4C80E7')
            $('.luobo-circle li').eq(j).siblings().css('background-color','#B5C9F3');
        });
        
        $('.cons-right img').click(() => {
            j++;
            (j > 3) の場合 {
                0 の場合
            }
            cusChange();
            $('.luobo-circle li').eq(j).css('背景色','#4C80E7')
            $('.luobo-circle li').eq(j).siblings().css('background-color','#B5C9F3');
        })
        function cusStart(){//カルーセルの開始 function cusTimer = setInterval(function(){//カルーセルの自動タイミング function j++;//インデックスは、1つの画像のみが表示されないように累積されます if(j==4){
                    j=0;//ここでは 8 枚の画像を使用しています。インデックスが 8 のとき、画像は消えているので、インデックスは 0 にクリアされます}
                cusChange(); //画像カルーセルの実行を続行します},5000) //2000 は画像が切り替わる頻度で、2 秒を意味します};
        function cusChange(){//画像表示関数。ここで、fadeOut と fadeIn はフェードインとフェードアウトの画像表示モードです$('.cons-middle .cons-mid').eq(j).fadeIn(300).siblings().stop().fadeOut(300);
            //eq は現在の画像を選択し、siblings は他の画像を除外し、stop は他の画像の切り替えを停止し、現在の画像のみを切り替えます$('.luobo-circle li').eq(j).css('background-color','#4C80E7')
            $('.luobo-circle li').eq(j).siblings().css('background-color','#B5C9F3');
        }

//ホームページバナーカルーセル var i = 0;
    var バナータイマー;
    function BannerChange(){//画像表示関数。ここで、fadeOut と fadeIn はフェードインとフェードアウトの画像表示モードです。$('.banner ul li').eq(i).fadeIn(300).siblings().stop().fadeOut(300);
    }
    function BannerStart(){//カルーセルの開始 function BannerTimer = setInterval(function(){//カルーセルの自動タイミング function i++;
            もし(i==2){
                私=0;
            }
            バナー変更();
        },3000)
    };
    $('.banner ul li').eq(0).show().siblings().hide();
    バナー開始();
    $('.pagination .prev').click(() => {
        私 - ;
        もし（i < 0）{
            私 = 2;
        };
        バナー変更();
    });
    $('.pagination .next').click(() => {
       私は++;
        もし（i>2）{
            私 = 0;
        }
        バナー変更();
    });