Using jQuery to implement the carousel effect

 var j = 0;//Define the index, the picture and the small dot are shared var cusTimer;//Define the timing function $('.cons-middle .cons-mid').eq(0).show().siblings().hide();//Define the default display image, which is the image with index 0 cusStart();//Start to implement the image carousel, using the timer $('.luobo-circle li').hover(function(){//When the mouse moves to a small dot, switch the image clearInterval(cusTimer);//And clear the timing j=$(this).index();//Get the index of the small dot that the mouse currently moves to cusChange();//Execute the function of switching images });
        $('.luobo-circle li').mouseleave(function(){
            cusStart(); //Define that when the mouse leaves the small dot, the timing function will continue to execute and the carousel will start });
        
        $('.cons-left img').click(() => {
            j--;
            if (j < 0) {
                j = 3;
            };
            cusChange();
            $('.luobo-circle li').eq(j).css('background-color','#4C80E7')
            $('.luobo-circle li').eq(j).siblings().css('background-color','#B5C9F3');
        });
        
        $('.cons-right img').click(() => {
            j++;
            if (j > 3) {
                j = 0;
            }
            cusChange();
            $('.luobo-circle li').eq(j).css('background-color','#4C80E7')
            $('.luobo-circle li').eq(j).siblings().css('background-color','#B5C9F3');
        })
        function cusStart(){//Carousel start function cusTimer = setInterval(function(){//Automatic carousel timing function j++;//Index is accumulated to prevent only one picture from being displayed if(j==4){
                    j=0;//I am using 8 pictures here. When the index is 8, the picture is gone, so the index is cleared to zero}
                cusChange(); //Continue to execute the picture carousel},5000) //2000 is how often the picture is switched, which means two seconds};
        function cusChange(){//Picture display function, where fadeOut and fadeIn are the picture display modes of fading in and out$('.cons-middle .cons-mid').eq(j).fadeIn(300).siblings().stop().fadeOut(300);
            //eq selects the current image, siblings excludes other images, stop stops switching other images and only switches the current image$('.luobo-circle li').eq(j).css('background-color','#4C80E7')
            $('.luobo-circle li').eq(j).siblings().css('background-color','#B5C9F3');
        }

//Home page banner carousel var i = 0;
    var bannerTimer;
    function bannerChange(){//Image display function, where fadeOut and fadeIn are the image display modes of fading in and out $('.banner ul li').eq(i).fadeIn(300).siblings().stop().fadeOut(300);
    }
    function bannerStart(){//Carousel start function bannerTimer = setInterval(function(){//Automatic carousel timing function i++;
            if(i==2){
                i=0;
            }
            bannerChange();
        },3000)
    };
    $('.banner ul li').eq(0).show().siblings().hide();
    bannerStart();
    $('.pagination .prev').click(() => {
        i--;
        if (i < 0) {
            i = 2;
        };
        bannerChange();
    });
    $('.pagination .next').click(() => {
       i++;
        if (i > 2) {
            i = 0;
        }
        bannerChange();
    });