Verwenden von jQuery zum Implementieren des Karusselleffekts

 var j = 0;//Definiere den Index, das Bild und der kleine Punkt werden gemeinsam genutzt var cusTimer;//Definiere die Zeitfunktion $('.cons-middle .cons-mid').eq(0).show().siblings().hide();//Definiere das Standardanzeigebild, also das Bild mit dem Index 0 cusStart();//Beginnen Sie mit der Implementierung des Bildkarussells, verwenden Sie den Timer $('.luobo-circle li').hover(function(){//Wenn die Maus zu einem kleinen Punkt bewegt wird, wechsele das Bild clearInterval(cusTimer);//Und lösche die Zeit j=$(this).index();//Holen Sie sich den Index des kleinen Punkts, zu dem die Maus aktuell bewegt wird cusChange();//Führen Sie die Funktion zum Wechseln der Bilder aus });
        $('.luobo-circle li').mouseleave(Funktion(){
            cusStart(); //Definieren Sie, dass die Zeitfunktion weiter ausgeführt wird und das Karussell startet, wenn die Maus den kleinen Punkt verlässt });
        
        $('.cons-left img').click(() => {
            J--;
            wenn (j < 0) {
                j = 3;
            };
            cusChange();
            $('.luobo-circle li').eq(j).css('Hintergrundfarbe','#4C80E7')
            $('.luobo-circle li').eq(j).siblings().css('Hintergrundfarbe','#B5C9F3');
        });
        
        $('.cons-right img').click(() => {
            }
            wenn (j > 3) {
                j = 0;
            }
            cusChange();
            $('.luobo-circle li').eq(j).css('Hintergrundfarbe','#4C80E7')
            $('.luobo-circle li').eq(j).siblings().css('Hintergrundfarbe','#B5C9F3');
        })
        function cusStart(){//Karussell starten function cusTimer = setInterval(function(){//Automatische Karussell-Timing-Funktion j++;//Index wird akkumuliert, um zu verhindern, dass nur ein Bild angezeigt wird if(j==4){
                    j=0;//Ich verwende hier 8 Bilder. Wenn der Index 8 ist, ist das Bild weg, also wird der Index auf Null gelöscht}
                cusChange(); //Bildkarussell weiter ausführen},5000) //2000 ist die Häufigkeit des Bildwechsels, also zwei Sekunden};
        function cusChange(){//Bildanzeigefunktion, wobei fadeOut und fadeIn die Bildanzeigemodi für Ein- und Ausblenden sind$('.cons-middle .cons-mid').eq(j).fadeIn(300).siblings().stop().fadeOut(300);
            //eq wählt das aktuelle Bild aus, Geschwister schließen andere Bilder aus, stop stoppt das Wechseln zu anderen Bildern und wechselt nur das aktuelle Bild$('.luobo-circle li').eq(j).css('background-color','#4C80E7')
            $('.luobo-circle li').eq(j).siblings().css('Hintergrundfarbe','#B5C9F3');
        }

//Bannerkarussell der Startseite var i = 0;
    var BannerTimer;
    function bannerChange(){//Bildanzeigefunktion, wobei fadeOut und fadeIn die Bildanzeigemodi zum Ein- und Ausblenden sind $('.banner ul li').eq(i).fadeIn(300).siblings().stop().fadeOut(300);
    }
    Funktion bannerStart(){//Karussell starten Funktion bannerTimer = setInterval(Funktion(){//Automatische Karussell-Timing-Funktion i++;
            wenn(i==2){
                ich = 0;
            }
            Banneränderung();
        },3000)
    };
    $('.banner ul li').eq(0).show().siblings().hide();
    bannerStart();
    $('.pagination .prev').click(() => {
        ich--;
        wenn (i < 0) {
            ich = 2;
        };
        Banneränderung();
    });
    $('.pagination .next').klick(() => {
       ich++;
        wenn (i > 2) {
            ich = 0;
        }
        Banneränderung();
    });