Beispielcode zur Implementierung eines gestapelten Karusselleffekts mit HTML+CSS+JS

 <Text>
    <div Klasse="kleineBox">
    <div Klasse="arrowLeft">←</div>
    <div class="smallPicBox"> //Verwenden Sie ein Div, um eine UL zu speichern, und legen Sie den anfänglichen Stil für jedes LI in der UL fest<ul>
                <li id="li1" style="position: absolute;top:calc(50% - 200px);left: 0px;z-index:1;background-color: aqua;transform: scale(0.5);transition: 0.3s;opacity: 0.5;background-image: url(./images/01.jpg);background-size: cover;"></li>
                <li id="li2" style="position: absolute;top:calc(50% - 200px);left: 150px; z-index:2;background-color: red;transform: scale(0.7); transition: 0.3s;opacity: 0.7;background-image: url(./images/02.jpg);background-size: cover;"></li>
                <li id="li3" style="position: absolute;top:calc(50% - 200px);left: 300px; z-index:3;background-color: blue;transform: scale(0.9); transition: 0.3s;opacity: 0.9;background-image: url(./images/03.jpg);background-size: cover;"></li>
                <li id="li4" style="position: absolute;top:calc(50% - 200px);left: 450px; z-index:4;background-color: green;transform: scale(1); transition: 0.3s;opacity: 1;background-image: url(./images/04.jpg);background-size: cover;"></li>
                <li id="li5" style="position: absolute;top:calc(50% - 200px);left: 600px; z-index:3;background-color: yellow;transform: scale(0.9); transition: 0.3s;opacity: 0.9;background-image: url(./images/05.jpg);background-size: cover;"></li>
                <li id="li6" style="position: absolute;top:calc(50% - 200px);left: 750px; z-index:2;background-color: gray;transform: scale(0.7); transition: 0.3s;opacity: 0.7;background-image: url(./images/06.jpg);background-size: cover;"></li>
                <li id="li7" style="position: absolute;top:calc(50% - 200px);left: 900px; z-index:1;background-color: deeppink;transform: scale(0.5); transition: 0.3s;opacity: 0.5;background-image: url(./images/07.jpg);background-size: cover;"></li>
            </ul>
        </div>
        <div Klasse="arrowRight">→</div>
    </div>
</div>
</body>

<Stil>
        *{
            Rand: 0;
            Polsterung: 0;
            Listenstil: keiner;
        }
        .albumBox{
            Breite: 1200px;
            Höhe: 400px;
            Rand: 0 automatisch;
            Rand: 1px durchgezogen #000;
        }

        .smallBox{
            Höhe: 400px;
            Zeilenhöhe: 400px;
            Position: relativ;
        }
        .smallPicBox{
            Breite: 1100px;
            Höhe: 400px;
            schweben: links;
            Position: relativ;
        }
        .smallPicBox ul{
            Breite: 100 %;
            Höhe: 400px;
        }
        .smallPicBox li{
            Breite: 320px;
            Höhe: 400px;
            schweben: links;
            Rand: 1px durchgezogen #000;
            Box-Größe: Rahmenbox;
        }
        .smallBox .current::nach{
            Inhalt: "\25b2";
            Position: absolut;
            oben: -31px;
            links: 70px;
            Farbe: rot;

        }
        .arrowLeft{
            Breite: 50px;
            Höhe: 400px;
            Position: absolut;
            links: 0;
            Rand: 1px durchgezogen #000;
            Box-Größe: Rahmenbox;
            Hintergrundfarbe: grau;
            Z-Index: 10;
        }
        .PfeilRechts{
            Breite: 50px;
            Höhe: 400px;
            Position: absolut;
            rechts: 0;
            Rand: 1px durchgezogen #000;
            Box-Größe: Rahmenbox;
            Hintergrundfarbe: grau;
            Z-Index: 10;
        }
    </Stil>

<Skript>
        var arrowLeft = document.querySelector(".arrowLeft")
        var Pfeil nach rechts = document.querySelector(".arrowRight")
        var ul = document.querySelector(".smallPicBox ul")
        var li = document.querySelectorAll(".smallPicBox li")
        var timerId = 0
        arrowLeft.onclick=function(){ //Linkspfeil-Klickereignis li=document.getElementsByTagName('li')
                ul.appendChild(li[0]) //Schneide das 0. Kindelement von ul bis zum Ende ab, um ein nahtloses Karussell zu erhalten posi(li) //Ändere die Eigenschaften jedes li}
        arrowRight.onclick=function(){ //Klickereignis für Rechtspfeil li=document.getElementsByTagName('li') //li erneut abrufen
                ul.insertBefore(li[6],li[0]) //Schneide das letzte Kindelement von ul nach vorne, um ein nahtloses Karussell zu erhalten posi(li) //Ändere die Eigenschaften jedes li}
        
        function posi(li){ //Li-Attribut ändern function var n1=0
                for(var x=0;x<li.length;x++){ //Position ändern li[x].style.left=n1+'px'
                    n1 = n1 + 150
                }
                for(var i=0;i<li.length/2;i++){ //Ändere die Ebene li[i].style.zIndex=i+1
                    li[li.Länge-1-i].style.zIndex=i+1
                }
                li[3].style.zIndex='4'
                var n2=0,3
                für (var j = 0; j <li.length/2; j++) { // Skalierung n2 = parseFloat (n2 + 0,2)
                    li[j].style.transform='Skala('+n2+')'
                    li[li.length-1-j].style.transform='Skala('+n2+')'
                }
                li[3].style.transform = "Skala(1)"
                var n3=0,3
                for(var k=0;k<li.length/2;k++){ //Transparenz ändern n3=parseFloat(n3+0.2)
                    li[k].style.opacity=n3
                    li[li.Länge-1-k].Stil.opacity=n3
                }
                li[3].style.opacity='1'
        }
        //Maus rein und raus temerId=setInterval(function(){
             Pfeil nach links.Klick()
        }, 1000);
        Pfeil nach links.beimMouseover=Funktion(){
            Intervall löschen(Timer-ID)
        }
        Pfeil nach links.onmouseout=function(){
           TimerId = Intervall festlegen(Funktion(){
            Pfeil nach links.Klick()
         }, 1000);
        }
        Pfeil nach rechts.beimMouseover=function(){
            Intervall löschen(Timer-ID)
        }
        Pfeil nach rechts.onmouseout=function(){
           TimerId = Intervall festlegen(Funktion(){
            Pfeil nach links.Klick()
         }, 1000);
        }
    </Skript>