Wie schreibe ich einen Karusselleffekt mit CSS?

Ich glaube, dass viele der Projekte, die meine Freunde durchgeführt haben, ein großes Bedürfnis nach Karussells haben, und andere verwenden möglicherweise direkt das Google Carousel-Plugin. in

Aber wenn Sie kein Javascript verwenden, können Sie dann den Effekt von Karussellbildern erzielen? Vielleicht haben Freunde dieses Problem nicht berücksichtigt, also verwenden wir CSS, um ein einfaches Karusselldiagramm zu implementieren

Grundlegende Bedarfsanalyse

Weil CSS nicht die gleiche präzise Steuerung wie js erreichen kann Einige Effekte können nicht erzielt werden, z. B. die Unterstützung des Benutzers beim Schieben nach links und rechts während des Karussells. Verwenden Sie daher CSS, um grundlegende Effekte auf intelligente Weise zu erzielen. Der unten aufgeführte Inhalt ist der, den wir implementiert haben:

1 In einem festen Bereich gleitet und wechselt der interne Inhalt von selbst, um einen Wiedergabeeffekt zu erzeugen

2 des Inhalts wird die Wiedergabe rückgängig gemacht oder zum Ausgangspunkt für die Wiedergabe zurückgekehrt

3. Jeder Inhalt bleibt für einen bestimmten Zeitraum erhalten, sodass Benutzer ihn deutlich sehen können

4. Der Inhalt kann angeklickt/bedient werden

Aufbau der Domstruktur

Zunächst muss ein Container als Container für das Karussell vorhanden sein, da Schiebeschalter Um implementiert zu werden, muss ein interner Untercontainer vorhanden sein, der alle zu wechselnden Inhalte enthält.

Wenn der Inhalt im Untercontainer nach links und rechts vertauscht wird, müssen Sie den Inhalt links und rechts anordnen rechts

Am Beispiel des Karussellbilds ist der obige Code

<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 der Hauptcontainer

.loop-images-container ein Untercontainer, der interne Bilder trägt .

.loop-image ist der Bildinhalt, Sie können

CSS anpassen, um statische Effekte zu erzielen Die Breite und Höhe jeder Inhaltsseite im Karussell sollte gleich sein und der Breite und Höhe des Hauptcontainers entsprechenBreite und Höhe

.loop-wrapEine der Breiten und Höhen muss vorhanden sein größer sein als der externe Hauptcontainer Container, sollte das Attribut

auf

gesetzt werden. Warum also nicht auf .loop-images-container setzen? Ich verrate es dir nicht, du kannst es selbst ausprobieren???overflow

.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;
}

hiddenÖffne die Seite im Browser unten und du siehst eine statische Seite ohne Karusselleffekt, außer dem ersten Bild, alle anderen Bilder sind unsichtbarauto

CSS, um den Karusselleffekt zu erzielen

Der Karusselleffekt ist letztendlich ein Animationseffekt, und durch die neuen Attribute von CSS3 können wir ihn anpassen An Animation, um den Karusselleffekt zu erzielen. Schauen wir uns zunächst das

-Attribut

/*
animation: name duration timing-function delay iteration-count direction
name: 动画名
duration： 动画持续时间 设置为0则不执行
timing-function：动画速度曲线
delay：动画延迟开始时间 设置为0则不延迟
iteration-count：动画循环次数 设置为infinite则无限次循环
direction：是否应该轮流反向播放动画 normal 否 alternate 是
*/

animation animation an. Der

-Wert ist der Animationsname. Der Animationsname kann zum Erstellen benutzerdefinierter Animationsregeln

animationAnalysieren der Animation name @keyframes

Um Karussell zu implementieren, wird im Wesentlichen der Untercontainer

, der den Inhalt enthält, verschoben, sodass der Inhalt an verschiedenen Orten gleichzeitig vor dem Benutzer angezeigt wird Zeit Insgesamt müssen fünf Bilder angezeigt werden. Wenn das Karussell insgesamt 10 Sekunden dauert, sollte jedes Bild 2 Sekunden dauern (20 %). . Wenn das Umschalten 500 ms (5 %) dauert, sollte die Anzeigezeit 1500 ms (15 %) betragen

Das CSS wurde also wie folgt transformiert.loop-images-container

.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~~~Der Karusselleffekt ist mit abgeschlossen reines CSS

Freunde, die den Effekt direkt sehen möchten, können auf den Link unten klicken

Reines CSS, um den Karusselleffekt zu realisieren

Dies ist ein Karusselleffekt in eine Richtung. Wenn Sie einen Round-Trip-Effekt erzielen möchten, können Freunde für den Karussell-Effekt

s

ausprobieren, aber auch das Zeitintervall der benutzerdefinierten Animationsregeln muss neu berechnet werden!

Empfohlenes Tutorial: „

CSS-Tutorialdirection“ alternate

Das obige ist der detaillierte Inhalt vonWie schreibe ich einen Karusselleffekt mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!