HTML+CSS+JS でスタックカルーセル効果を実装するサンプルコード

 <本文>
    <div class="smallBox">
    <div class="arrowLeft">←</div>
    <div class="smallPicBox"> //div を使用して ul を保存し、ul<ul> 内の各 li の初期スタイルを設定します。
                <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 class="arrowRight">→</div>
    </div>
</div>
</本文>

<スタイル>
        *{
            マージン: 0;
            パディング: 0;
            リストスタイル: なし;
        }
        .アルバムボックス{
            幅: 1200ピクセル;
            高さ: 400px;
            マージン: 0 自動;
            境界線: 1px実線 #000;
        }

        .smallBox{
            高さ: 400px;
            行の高さ: 400px;
            位置: 相対的;
        }
        .smallPicBox{
            幅: 1100ピクセル;
            高さ: 400px;
            フロート: 左;
            位置: 相対的;
        }
        .smallPicBox ul{
            幅: 100%;
            高さ: 400px;
        }
        .smallPicBox li{
            幅: 320ピクセル;
            高さ: 400px;
            フロート: 左;
            境界線: 1px実線 #000;
            ボックスのサイズ: 境界線ボックス;
        }
        .smallBox .current::after{
            内容: "\25b2";
            位置: 絶対;
            上: -31px;
            左: 70px;
            色: 赤;

        }
        .arrowLeft{
            幅: 50px;
            高さ: 400px;
            位置: 絶対;
            左: 0;
            境界線: 1px実線 #000;
            ボックスのサイズ: 境界線ボックス;
            背景色: グレー;
            zインデックス: 10;
        }
        .arrowRight{
            幅: 50px;
            高さ: 400px;
            位置: 絶対;
            右: 0;
            境界線: 1px実線 #000;
            ボックスのサイズ: 境界線ボックス;
            背景色: グレー;
            zインデックス: 10;
        }
    </スタイル>

<スクリプト>
        var arrowLeft = document.querySelector(".arrowLeft")
        var arrowRight = document.querySelector(".arrowRight")
        var ul = document.querySelector(".smallPicBox ul")
        var li = document.querySelectorAll(".smallPicBox li")
        var タイマー ID = 0
        arrowLeft.onclick=function(){ //左矢印クリックイベント li=document.getElementsByTagName('li')
                ul.appendChild(li[0]) // ul の 0 番目の子要素を末尾までカットしてシームレスなカルーセルを実現します。posi(li) // 各 li のプロパティを変更します。}
        arrowRight.onclick=function(){ //右矢印クリックイベント li=document.getElementsByTagName('li') //liを再度取得
                ul.insertBefore(li[6],li[0]) //シームレスなカルーセルを実現するために、ulの最後の子要素を前面にカットします。posi(li) //各liのプロパティを変更します。}
        
        function posi(li){ //li属性を変更する function var n1=0
                for(var x=0;x<li.length;x++){ //位置を変更 li[x].style.left=n1+'px'
                    n1=n1+150
                }
                for(var i=0;i<li.length/2;i++){ //レベルを変更する li[i].style.zIndex=i+1
                    li[li.length-1-i].style.zIndex=i+1
                }
                li[3].style.zIndex='4'
                変数n2=0.3
                for(var j=0;j<li.length/2;j++){ //スケーリング n2=parseFloat(n2+0.2)
                    li[j].style.transform='scale('+n2+')'
                    li[li.length-1-j].style.transform='scale('+n2+')'
                }
                li[3].style.transform = 'スケール(1)'
                変数n3=0.3
                for(var k=0;k<li.length/2;k++){ //透明度を変更 n3=parseFloat(n3+0.2)
                    li[k].style.opacity=n3
                    li[li.length-1-k].style.opacity=n3
                }
                li[3].style.opacity='1'
        }
        //マウスインとマウスアウト temerId=setInterval(function(){
             矢印左クリック()
        }, 1000);
        arrowLeft.onmouseover=関数(){
            クリア間隔(タイマーID)
        }
        arrowLeft.onmouseout=関数(){
           タイマーID = setInterval(関数(){
            矢印左クリック()
         }, 1000);
        }
        arrowRight.onmouseover=関数(){
            クリア間隔(タイマーID)
        }
        arrowRight.onmouseout=関数(){
           タイマーID = setInterval(関数(){
            矢印左クリック()
         }, 1000);
        }
    </スクリプト>