Realization of carousel map effect with jquery

In this paper, we share the specific code of carousel diagram with jquery for your reference. The specific contents are as follows

(With small dots and left and right arrow switching effect)

Principle: Define the index, timed the task to realize carousel switching, and also need to switch the style of small dots when switching

 var j = 0;// Define index, picture and dot sharing 
        var cusTimer;// Define timing function 
        $('.cons-middle .cons-mid').eq(0).show().siblings().hide();// Define the default display picture, that is, the index is 0 The picture of 
        cusStart();// Began to realize picture carousel, using timer 
        $('.luobo-circle li').hover(function(){// When the mouse moves to a small dot, switch the picture 
            clearInterval(cusTimer);// And clear the timing 
            j=$(this).index();// Gets the index of the dot to which the mouse is currently moving 
            cusChange();// Execute the function of switching pictures 
        });
        $('.luobo-circle li').mouseleave(function(){
            cusStart();// Defines the timing function to continue when the mouse leaves the dot, and the carousel begins 
        });
        
        $('.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 starting function 
            cusTimer = setInterval(function(){// Automatic carousel timing function 
                j++;// Indexes are accumulated to prevent pictures from being displayed only 1 Zhang 
                if(j==4){
                    j=0;// I use it here 8 Picture, when the index is 8 When the picture is gone, clear the index 
                }
                cusChange();// Continue with picture carousel 
            },5000)//2000 How long is the switch 1 Second picture, representing two seconds 
        };
        function cusChange(){// Image display function, here's fadeOut And fadeIn Is the picture display mode fade in and fade out 
            $('.cons-middle .cons-mid').eq(j).fadeIn(300).siblings().stop().fadeOut(300);
            //eq Select the current picture, siblings Indicates excluding other pictures, stop It means that other pictures stop switching, and only the current picture is switched 
            $('.luobo-circle li').eq(j).css('background-color','#4C80E7')
            $('.luobo-circle li').eq(j).siblings().css('background-color','#B5C9F3');
        }

(No dots, only automatic carousel and left-right switching)

// Home page banner Carousel 
    var i = 0;
    var bannerTimer;
    function bannerChange(){// Image display function, here's fadeOut And fadeIn Is the picture display mode fade in and fade out 
        $('.banner ul li').eq(i).fadeIn(300).siblings().stop().fadeOut(300);
    }
    function bannerStart(){// Carousel starting 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();
    });