以下はスタイル部分です: *{margin:0;padding:0;} a{text-decoration:none} li{list-style:none;}</pre><div class="contentsignin">ログイン後にコピー</div></div><p>デザインの幅は、カルーセル画像の合計幅に最初の画像の幅を加えたものを超えてはなりません。最初の画像の幅はカルーセル効果を表示するためのものです）私のものは幅 1500、高さ 200 で、オーバーフロー非表示を設定します（表示領域からの移動を排除し、引き続き表示するため） </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">#box{width:1500px;height:200px;margin:0 auto;overflow:hidden;}</pre><div class="contentsignin">ログイン後にコピー</div></div><p>1000% は、ul の幅を広く設定するための怠惰な書き方です。 </p><p> (推奨チュートリアル: <a href="//m.sbmmt.com/css-tutorial.html" target="_blank">CSS 入門チュートリアル </a>) </p><p>カルーセル アニメーションの名前、1 回回転するのにかかる時間</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">#box ul{height:200px;width:1000%;animation:animal 4s linear infinite;}</pre><div class="contentsignin">ログイン後にコピー</div></div><p>フロートを設定する全画像を1行表示にする 絵の幅を1行にする </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">#box ul li{float:left;width:133px;height:200px;}</pre><div class="contentsignin">ログイン後にコピー</div></div><p>マウスロール時のポーズを設定する </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">#box:hover ul{animation-play-state:paused;}</pre><div class="contentsignin">ログイン後にコピー</div></div><p>アニメーションのアニメーション名とカルーセルの移動方向を設定する(アニメーション効果)</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false"> @keyframes animal { 0%{margin-left:0;} 100%{margin-left:-1463px;} } ログイン後にコピー以下は本文部分です カルーセル画像は通常、クリックすることでアクセスできるため、タグ内に配置されます ログイン後にコピー詳細なプログラミングについては、関連コンテンツについては、php 中国語 Web サイトの プログラミング入門 列に注目してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
