パノラマカルーセルを実装するための HTML+CSS サンプル コード

<div class="コンテナ">
    <div id="スライド">
        <div class="item" style="background-image:url('./img/Zhang Ruonan01.jpg')"></div>
        <div class="item" style="background-image:url('./img/Ju Jingyi01.jpg')"></div>
        <div class="item" style="background-image:url('./img/Ju Jingyi02.jpg')"></div>
        <div class="item" style="background-image:url('./img/Ju Jingyi06.jpg')"></div>
        <div class="item" style="background-image:url('./img/Ju Jingyi04.jpg')"></div>
        <div class="item" style="background-image:url('./img/Ju Jingyi07.jpg')"></div>
    </div>
    <div class="ボタン">
        <div class="左">
            < 前</div>
                <div class="center">壁紙をダウンロード</div>
                <div class="right">次へ ></div>
        </div>
    </div>
</div>

 * {
    マージン: 0;
    パディング: 0;
    ボックスのサイズ設定: ボーダーボックス;
}
。容器 {
    幅: 100vw;
    高さ: 100vh;
    位置: 相対的;
    オーバーフロー: 非表示;
}
。アイテム {
    幅: 240ピクセル;
    高さ: 160ピクセル;
    位置: 絶対;
    トップ: 50%;
    左: 0;
    変換: 変換Y(-50%);
    境界半径: 10px;
    ボックスシャドウ: 0 30px 50px #505050;
    背景サイズ: カバー;
    背景位置: 中央;
    遷移: 1秒。
}
.item:nth-child(1)、
.item:nth-child(2) {
    左: 0;
    トップ: 0;
    幅: 100%;
    高さ: 100%;
    変換:translateY(0);
    ボックスシャドウ: なし。
    境界半径: 0;
}
.item:nth-child(3) {
    左: 70%。
}
.item:nth-child(4) {
    左: calc(70% + 250px);
}
.item:nth-child(5) {
    左: calc(70% + 500px);
}
.item:n番目の子(n+6) {
    左: calc(70% + 750px);
    不透明度: 0;
}
.ボタン {
    幅: 100%;
    位置: 絶対;
    下: 50ピクセル;
    マージン左: -50px;
    テキスト整列: 中央;
    ディスプレイ: フレックス;
    コンテンツの位置揃え: 中央;
}
.buttons div {
    幅: 120ピクセル;
    高さ: 50ピクセル;
    行の高さ: 50px;
    テキスト整列: 中央;
    境界半径: 5px;
    マージン: 0 25px;
    トランジション: 0.5秒。
    カーソル: ポインタ;
    ユーザー選択: なし。
    フォントサイズ: 20px;
    色: #fff;
    背景色: rgba(0, 0, 0, 0.4);
    ボックスシャドウ: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

 const leftBtn = document.querySelector(".buttons .left")
const rightBtn = document.querySelector(".buttons .right")
const slide = document.querySelector("#slide")
let openClick = true // スロットル処理 (アニメーションの実行プロセスを確実にするため、ボタンが繰り返しクリックされないようにします)
leftBtn.addEventListener("クリック", () => {
  if (openClick) {
    openClick = false // クリックをトリガーした後、ボタンを無効にします const items = document.querySelectorAll(".item")
    slide.prepend(items[items.length - 1])
    setTimeout(() => openClick = true, 1000) // ボタンを再度開くまで 1 秒}
})
rightBtn.addEventListener("クリック", () => {
  if (openClick) {
    openClick = false
    const items = document.querySelectorAll(".item")
    slide.appendChild(items[0])
    setTimeout(() => openClick = true, 1000)
  }
})

* {
  マージン: 0;
  パディング: 0;
  ボックスのサイズ設定: ボーダーボックス;
}

 。容器 {
  幅: 100vw;
  高さ: 100vh;
  位置: 相対的;
  オーバーフロー: 非表示;
}

 。アイテム {
  幅: 240ピクセル;
  高さ: 160ピクセル;
  位置: 絶対;
  トップ: 50%;
  左: 0;
  変換: 変換Y(-50%);
  境界半径: 10px;
  ボックスシャドウ: 0 30px 50px #505050;
  背景サイズ: カバー;
  背景位置: 中央;
  遷移: 1秒。
}

 .item:nth-child(1)、
.item:nth-child(2) {
  左: 0;
  トップ: 0;
  幅: 100%;
  高さ: 100%;
  変換：translateY(0);
  ボックスシャドウ: なし。
  境界半径: 0;
}

 .item:nth-child(3) {
  左: 70%。
}

 .item:nth-child(4) {
  左: calc(70% + 250px);
}

 .item:nth-child(5) {
  左: calc(70% + 500px);
}

 .item:n番目の子(n+6) {
  左: calc(70% + 750px);
  不透明度: 0;
}

 .ボタン {
  幅: 100%;
  位置: 絶対;
  下: 50ピクセル;
  マージン左: -50px;
  テキスト整列: 中央;
  ディスプレイ: フレックス;
  コンテンツの位置揃え: 中央;
}

 .buttons div {
    幅: 120ピクセル;
    高さ: 50ピクセル;
    行の高さ: 50px;
    テキスト整列: 中央;
    境界半径: 5px;
    マージン: 0 25px;
    トランジション:.5秒;
    カーソル: ポインタ;
    ユーザー選択: なし。
    フォントサイズ: 20px;
    色: #fff;
    背景色: rgba(0, 0, 0, 0.4);
    ボックスシャドウ: 2px 2px 2px rgba(0, 0, 0, 0.2);
}