ホームページ > 記事 > ウェブフロントエンド > CSSでカルーセル画像を作成
CSSでカルーセル画像を作成
- 王林転載
- 2020-02-29 18:01:522744ブラウズ
以下はスタイル部分です:
<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 サイトの他の関連記事を参照してください。
声明：
この記事はjb51.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。