CSS3でカルーセル画像を作成する方法

スライドショーは Web ページでよく見られます。美しい写真が使われています。こちらは純粋な CSS3 スライドショーです。

スタイル部分は次のとおりです。

これらのセリフは理解できますか？

<スタイル>
    *{マージン:0;パディング:0;}
    a{テキスト装飾:なし}
    li{リストスタイル:なし;}

デザインの幅は、カルーセル画像の合計幅と最初の画像の幅（最初の画像の幅はカルーセル効果を目立たせるために追加されます）を超えないようにしてください。私の場合は幅 1500、高さ 200 で、オーバーフローを非表示に設定しています（表示領域から移動してもまだ表示されている表示領域を削除します）。

 #box{幅:1500px;高さ:200px;マージン:0 自動;オーバーフロー:非表示;}

1000% は怠惰な書き方です。ul の幅を広く設定するために使用されます。全体の画像の幅の少なくとも 2 倍にする必要があるため、誇張されているように見えます。なぜ 1 枚未満の画像の幅の 2 倍にする必要があるのでしょうか。画像が左に移動しているためです (方向は自分で設定します)。移動した場合、追加の画像がないとカルーセル効果が得られません。

1000% で十分な長さなので、写真全体の幅を計算する必要はありません。もちろん、写真が十分にある場合は、このように設定する必要はありません。全体の幅の半分に、1 枚未満の写真の幅を加えた値を設定します。回転するアニメーションの名前と回転頻度

 #box ul{高さ:200px;幅:1000%;アニメーション:動物 4秒 線形無限;}

フロートを設定して、すべての画像を1行に表示し、画像の幅を設定します。

 #ボックス ul li{float:left;幅:133px;高さ:200px;}

マウスオーバーの一時停止を設定する

#box:hover ul{アニメーション再生状態:一時停止;}

アニメーション名とカルーセルの方向（アニメーション効果）を設定します

    @keyframes 動物 {
        0%{左マージン:0;}
        100%{左マージン:-1463px;}
    }
</スタイル>

以下は体の部分です

スライドショーは通常クリック可能なので、a タグ内に配置されます。

<本文>
<div id="ボックス">
<ul>
    <li><a href="#"><img src="images/1.jpg" /></a></li>
    <li><a href="#"><img src="images/2.jpg" /></a></li>
    <li><a href="#"><img src="images/3.jpg" /></a></li>
    <li><a href="#"><img src="images/4.jpg" /></a></li>
    <li><a href="#"><img src="images/5.jpg" /></a></li>
    <li><a href="#"><img src="images/6.jpg" /></a></li>
    <li><a href="#"><img src="images/7.jpg" /></a></li>
    <li><a href="#"><img src="images/8.jpg" /></a></li>
    <li><a href="#"><img src="images/9.jpg" /></a></li>
    <li><a href="#"><img src="images/10.jpg" /></a></li>
    <li><a href="#"><img src="images/11.jpg" /></a></li>
    <li><a href="#"><img src="images/1.jpg" /></a></li>
    <li><a href="#"><img src="images/2.jpg" /></a></li>
    <li><a href="#"><img src="images/3.jpg" /></a></li>
    <li><a href="#"><img src="images/4.jpg" /></a></li>
    <li><a href="#"><img src="images/5.jpg" /></a></li>
    <li><a href="#"><img src="images/6.jpg" /></a></li>
    <li><a href="#"><img src="images/7.jpg" /></a></li>
    <li><a href="#"><img src="images/8.jpg" /></a></li>
    <li><a href="#"><img src="images/9.jpg" /></a></li>
    <li><a href="#"><img src="images/10.jpg" /></a></li>
    <li><a href="#"><img src="images/11.jpg" /></a></li>
    <li><a href="#"><img src="images/1.jpg" /></a></li>
</ul>
</div>
</本文>

カルーセルを実装する方法は複数あります。次回シェアさせていただきます！

<<: カスタム変数を使用した MySQL クエリの最適化

>>: Dockerコンテナのデータを復元する方法