CSSを使用してカルーセル効果を記述するにはどうすればよいですか?

私の友人が行ったプロジェクトの多くにはカルーセルが必要だと思います。独自のホイールを作成する友人もいるでしょうし、Google カルーセルを直接使用する友人もいるでしょう。画像プラグイン

しかし、JavaScript を使用しない場合、カルーセル画像の効果を実現できますか?おそらく友人はこの問題を考慮していないので、CSS を使用して簡単なカルーセル チャートを実装しましょう

基本的な需要分析

CSS では、js と同じ正確な制御を実現することはできないためです。 、カルーセル中にユーザーが左右にスライドできるようにするなど、一部の効果は実現できないため、CSS を使用して基本的な効果をインテリジェントに実現します。以下にリストされているコンテンツは私たちが実装したものです:

1. 固定領域では、内部コンテンツが自動的にスライドして切り替わり、再生効果を形成します

2. 最後の部分に切り替えるときコンテンツを再生すると、逆再生または開始点に戻って再生されます。

3. 各コンテンツは、ユーザーがはっきりと見えるように一定期間保持されます。

#4. コンテンツは、

dom構造構築

まずカルーセルのコンテナとなるコンテナが必要ですが、同時にスライド切り替えなので、これを実装するには、切り替えられるすべてのコンテンツをロードする内部サブコンテナが必要です

サブコンテナ内のコンテンツが左右に切り替えられる場合、コンテンツは左右に配置される必要があります.

以下はカルーセル画像を例として取り上げます。上記のコード

<div class="loop-wrap">
    <div class="loop-images-container">
        <img src="darksky.jpg" alt="" class="loop-image">
        <img src="starsky.jpg" alt="" class="loop-image">
        <img src="whiteland.jpg" alt="" class="loop-image">
        <img src="darksky.jpg" alt="" class="loop-image">
        <img src="starsky.jpg" alt="" class="loop-image">
    </div>
</div>

.loop-wrap はメインコンテナです

# .loop-images-container

は内部画像を運ぶサブコンテナです。

.loop-image

は画像コンテンツです。他のコンテンツを表示する必要がある場合は、カスタマイズできます。

静的効果を実現するための css

カルーセル内の各ページの幅と高さは、メイン コンテナと同じである必要があります

.loop-wrap

幅と高さ

.loop-images-container

の幅と高さは外部メインコンテナよりも1つ大きい必要があり、overflow属性は次のように設定する必要があります。 ＃＃＃隠れた＃＃＃。それでは、auto に設定してみてはいかがでしょうか?教えません、あなた自身で試してみてください???<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">.loop-wrap { position: relative; width: 500px; height: 300px; margin: 100px auto; overflow: hidden; } .loop-images-container{ position: absolute; left: 0; top: 0; width: 500%; /* 横向排列 5张图片 宽度应为主容器5倍 */ height: 100%; font-size: 0; } .loop-image{ width: 500px; height: 300px; }</pre><div class="contentsignin">ログイン後にコピー</div></div>以下のブラウザでページを開くと、カルーセル効果のない静的なページが表示されます。最初の画像を除き、他の画像はすべては目に見えません

カルーセル効果を実現するための css

カルーセル効果は最終的にはアニメーション効果であり、css3animation we You の新しい属性を使用します。アニメーションをカスタマイズしてカルーセル効果を実現できます。まず

animation

を見てみましょう。この属性 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">/* animation: name duration timing-function delay iteration-count direction name: 动画名 duration： 动画持续时间 设置为0则不执行 timing-function：动画速度曲线 delay：动画延迟开始时间 设置为0则不延迟 iteration-count：动画循环次数 设置为infinite则无限次循环 direction：是否应该轮流反向播放动画 normal 否 alternate 是 */</pre><div class="contentsignin">ログイン後にコピー</div></div>animation の

name

値はアニメーション名です。アニメーション名は渡すことができます。 @keyframes カスタム アニメーション ルールの作成アニメーションの分析

カルーセルを実装するには、基本的に、 内部にコンテンツを運ぶサブコンテナを作成します。 loop-images -container ディスプレイスし、異なる場所にあるコンテンツをユーザーの目の前に一度に表示できるようにします

表示する必要がある画像が 5 枚あります。カルーセルに合計 10 秒かかる場合の場合、各画像には 2 秒 (20%) が必要で、各画像の時間のかかる要素は切り替え時間と表示時間です。切り替えに 500 ミリ秒 (5%) かかる場合、表示時間は 1500 ミリ秒 (15%) になるはずです。 つまり、この css

.loop-images-container{
    position: absolute;
    left: 0; top: 0;
    width: 500%;
    height: 100%;
    font-size: 0;
    transform: translate(0,0); /* 初始位置位移 */
    animation: loop 10s linear infinite;
}
/* 创建loop动画规则 */
/* 
   轮播5张，总耗时10s，单张应为2s(20%)
   单张切换动画耗时500ms，停留1500ms
*/
@keyframes loop {
    0% {transform: translate(0,0);}
    15% {transform: translate(0,0);} /* 停留1500ms */
    20% {transform: translate(-20%,0);} /* 切换500ms 位移-20% */
    35% {transform: translate(-20%,0);}
    40% {transform: translate(-40%,0);}
    55% {transform: translate(-40%,0);}
    60% {transform: translate(-60%,0);}
    75% {transform: translate(-60%,0);}
    80% {transform: translate(-80%,0);}
    95% {transform: translate(-80%,0);}
    100% {transform: translate(0,0);} /* 复位到第一张图片 */
}

Dangdangdang~~~ カルーセル効果の純粋な CSS 実装が完了しました

効果を直接確認したい友達は、以下のリンク

純粋な CSS 実装カルーセル効果

これは一方向のカルーセル効果です。往復方向のカルーセル効果を実現したい場合は、友人が

代替案を試すことができます。

of

direction

ですが、カスタム アニメーション ルールの時間間隔も再計算する必要があります。 推奨チュートリアル: 「CSS チュートリアル 」

以上がCSSを使用してカルーセル効果を記述するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。