js, um einen einfachen Karusselleffekt zu erzielen

<Stil>
        .Kasten {
            Position: relativ;
            Überlauf: versteckt;
            Rand: 200px automatisch;
            Breite: 600px;
            Höhe: 400px;
        }
        
        .img {
            Breite: 3000px;
            Höhe: 400px;
        }
        
        img {
            schweben: links;
            Breite: 600px;
            Höhe: 400px;
        }
        
        .btn {
            Position: absolut;
            oben: 350px;
            links: 245px;
            Breite: 110px;
            Höhe: 20px;
        }
        
        .dian {
            schweben: links;
            Rand: 5px;
            Breite: 12px;
            Höhe: 12px;
            Randradius: 50 %;
            Hintergrundfarbe: rgba(255, 255, 255, 0,3);
            Cursor: Zeiger;
        }
        
        .links,
        .Rechts {
            Anzeige: keine;
            Box-Größe: Rahmenbox;
            Position: absolut;
            oben: 150px;
            Breite: 50px;
            Höhe: 100px;
            Hintergrundfarbe: rgba(0, 0, 0, 0,521);
            Schriftgröße: 40px;
            Zeilenhöhe: 100px;
            Farbe: #fff;
        }
        
        .box:hover .links,
        .box:hover .rechts {
            Anzeige: Block;
        }
        
        .links {
            Polsterung links: 10px;
            links: 0;
        }
        
        .Rechts {
            Polsterung rechts: 10px;
            Textausrichtung: rechts;
            rechts: 0;
        }
</Stil>

<div Klasse="Box">
        <div Klasse="img">
            <img src="./img/1.jpeg" alt="">
            <img src="./img/2.jpeg" alt="">
            <img src="./img/3.jpeg" alt="">
            <img src="./img/4.jpeg" alt="">
            <img src="./img/5.jpeg" alt="">
        </div>

        <div Klasse="btn">
            <span Klasse="dian"></span>
            <span Klasse="dian"></span>
            <span Klasse="dian"></span>
            <span Klasse="dian"></span>
            <span Klasse="dian"></span>
        </div>

        <div Klasse="links">&lt; </div>
        <div Klasse="rechts">&gt;</div>
</div>

<Skript>
        var btn = document.getElementsByClassName('btn')[0];
        var imgBox = document.getElementsByClassName('img')[0];
        var imgs = imgBox.getElementsByTagName('img');
        var btnChild = document.getElementsByClassName('dian');

        var k = 0;
        // Der Schaltfläche benutzerdefinierte Eigenschaften hinzufügen for (var i = 0; i < btnChild.length; i++) {
            btnChild[i].dataset.num = i * 600;
        }
        // Standardmäßig ist das erste Bild und die erste Schaltfläche ist weiß btnChild[0].style.background = 'rgba(255, 255, 255, 0.8)';

        // Klicken Sie auf die Schaltfläche, um das Bild zu wechseln und die Schaltflächenfarbe zu ändern btn.onclick = function(e) {

            wenn (e.target.nodeName === 'SPAN') {
                // Zuerst alle Schaltflächen auf die Standardfarbe für (var i = 0; i < btnChild.length; i++) { setzen
                    btnChild[i].style.background = "rgba(255, 255, 255, 0,4)";
                }
                // Die angeklickte Schaltfläche ändert ihre Farbe k = +e.target.dataset.num;
                konsole.log(k);
                btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)';
                // Bild wechseln imgBox.style.transform = `translateX(-${e.target.dataset.num}px)`;
            }
        }

        // Bildlänge abrufen // var imgWidth = +getComputedStyle(imgs[0]).width.slice(0, -2);
        var imgWidth = imgs[0].offsetWidth;


        // Timer verschiebt das Bild var interval1 = setInterval(move, 1000);
        var Intervall;



        // Funktion verschiebt das Bild und ändert die Schaltfläche Funktion move() {
            k += Bildbreite;
            if (k === Bildbreite * Bildlänge) {
                k = 0;
            }
            // Bild verschieben imgBox.style.transform = `translateX(-${k}px)`;
            // Schaltflächenfarbe ändern für (var i = 0; i < btnChild.length; i++) {
                btnChild[i].style.background = "rgba(255, 255, 255, 0,4)";
            }

            btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)';


        }


        // Bewegen Sie die Maus über das Bild, um den Timer zu löschen. var box = document.getElementsByClassName('box')[0];
        box.onmouseover = Funktion() {
            Intervall löschen(Intervall1);
            clearInterval(Intervall);
        }

        // Bewegen Sie die Maus nach außen, um den Timer zu starten box.onmouseout = function() {
            Intervall = Intervall festlegen (Verschiebung, 1000);
        }

        var leftBtn = document.getElementsByClassName('left')[0];
        var rightBtn = document.getElementsByClassName('right')[0];

        rightBtn.onclick = Funktion() {

            k += Bildbreite;
            if (k === Bildbreite * Bildlänge) {
                k = 0;
            }
            // Bild verschieben imgBox.style.transform = `translateX(-${k}px)`;
            // Schaltflächenfarbe ändern für (var i = 0; i < btnChild.length; i++) {
                btnChild[i].style.background = "rgba(255, 255, 255, 0,4)";
            }

            btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)';


        }
        leftBtn.onclick = Funktion() {
            k -= Bildbreite;
            wenn (k < 0) {
                k = Bildbreite * (Bildlänge - 1);
            }
            imgBox.style.transform = ``translateX(-${k}px)``;
            // Schaltflächenfarbe ändern für (var i = 0; i < btnChild.length; i++) {
                btnChild[i].style.background = "rgba(255, 255, 255, 0,4)";
            }

            btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)';


        }
</Skript>