JDカルーセル効果を実現するための純粋なHTMLとCSS

JD カルーセルは、動的な効果を追加せず、主に位置決めの知識を使用して、純粋な HTML と CSS を使用して実装されました。

図に示すように、2 つのサイド矢印画像があります。

<!DOCTYPE html>
<html lang="ja">
<head> <meta charset="UTF-8">
    <title>ルンボ</title>
    <スタイル>
        *{
            パディング: 0;
            マージン: 0;
        }
        li{
            リストスタイル: なし;
        }
        .lunbo{
            マージン: 40px 自動;
            高さ: 470ピクセル;
            幅: 590ピクセル;
            位置: 相対的;
        }
        .左、.右{
            位置: 絶対;
            上位: 50%;
            上マージン: -18px;
            幅: 24px;
            高さ: 36px;
        }
        。左{
            左: 0;
        }
        。右{
            右: 0;
        }
        .lunbo ul{
            高さ: 18px;
            幅: 151ピクセル;
            背景: rgba(255,255,255,.3);
            位置: 絶対;
            下: 10px;
            左: 50%;
            左マージン: -76px;
            境界線の半径: 10px;
        }
        .ルンボ・リ{
            高さ: 14px;
            幅: 14px;
            境界線の半径: 50%;
            背景色: #fff;
            フロート: 左;
            マージン: 2px;
        }
        .lunbo .current{
            背景色: #f40;
        }
    </スタイル>
</head>
<本文>
    <div class="lunbo">
        <img src="images/lunbo.jpg" alt="">
        <div class="left"><img src="images/left.png" alt=""></div>
        <!-- リンクを使用してから背景を使用することもできます -->
        <div class="right"><img src="images/right.png" alt=""></div>
        <ul>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</本文>
</html>

以下の効果が得られました

要約する

上記は、エディターが導入した JD カルーセル効果を実現するための純粋な HTML と CSS です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: ウェブフォームデザインのための5つの実用的なヒント

>>: JavaScript のアンチシェイクとスロットリングの違いと実装