CSSでカルーセル画像を作成-CSSチュートリアル-php.cn

CSSでカルーセル画像を作成

王林

リリース： 2020-02-29 18:01:52

転載

2850 人が閲覧しました

CSSでカルーセル画像を作成

以下はスタイル部分です:

<style>
    *{margin:0;padding:0;}
    a{text-decoration:none}
    li{list-style:none;}

ログイン後にコピー

デザインの幅は、カルーセル画像の合計幅に最初の画像の幅を加えたものを超えてはなりません。最初の画像の幅はカルーセル効果を表示するためのものです）私のものは幅 1500、高さ 200 で、オーバーフロー非表示を設定します（表示領域からの移動を排除し、引き続き表示するため）

#box{width:1500px;height:200px;margin:0 auto;overflow:hidden;}

ログイン後にコピー

1000% は、ul の幅を広く設定するための怠惰な書き方です。

(推奨チュートリアル: CSS 入門チュートリアル )

カルーセルアニメーションの名前、1 回回転するのにかかる時間

#box ul{height:200px;width:1000%;animation:animal 4s linear infinite;}

ログイン後にコピー

フロートを設定する全画像を1行表示にする絵の幅を1行にする

#box ul li{float:left;width:133px;height:200px;}

ログイン後にコピー

マウスロール時のポーズを設定する

#box:hover ul{animation-play-state:paused;}

ログイン後にコピー

アニメーションのアニメーション名とカルーセルの移動方向を設定する(アニメーション効果)

    @keyframes animal {
        0%{margin-left:0;}
        100%{margin-left:-1463px;}
    }
</style>

ログイン後にコピー

以下は本文部分です

カルーセル画像は通常、クリックすることでアクセスできるため、タグ内に配置されます

<body>
<div id="box">
<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>
</body>

ログイン後にコピー

詳細なプログラミングについては、関連コンテンツについては、php 中国語 Web サイトのプログラミング入門列に注目してください。

以上がCSSでカルーセル画像を作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。