Eine Methode zum Erstellen von Karussellbildern mit CSS3

Diashows sieht man häufig auf Webseiten. Sie enthalten wunderschöne Bilder. Hier ist eine reine CSS3-Diashow.

Hier ist der Stilteil:

Sie können diese Zeilen verstehen, oder?

<Stil>
    *{Rand:0;Padding:0;}
    ein {text-decoration:none}
    li{Listenstil: keine;}

Die Designbreite sollte die Gesamtbreite der Karussellbilder plus die Breite des ersten Bildes nicht überschreiten (die Breite des ersten Bildes wird hinzugefügt, um den Karusselleffekt sichtbar zu machen). Meine ist 1500 breit und 200 hoch, und dann wird der Überlauf auf Ausblenden eingestellt (den Anzeigebereich eliminieren, der noch angezeigt wird, wenn er aus dem Anzeigebereich herausbewegt wird)

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

1000 % ist eine faule Schreibweise. Es wird verwendet, um die Breite von ul breiter zu machen. Es sieht übertrieben aus, weil es mindestens doppelt so breit sein muss wie das Gesamtbild. Warum sollte es doppelt so breit sein wie weniger als ein Bild? Weil sich das Bild nach links bewegt (die Richtung wird von Ihnen selbst festgelegt). Wenn es nach außen bewegt wird, gibt es ohne zusätzliche Bilder keinen Karusselleffekt.

1000 % ist lang genug, sodass die Gesamtbreite des Bildes nicht berechnet werden muss. Wenn genügend Bilder vorhanden sind, müssen Sie dies natürlich nicht auf diese Weise einstellen. Stellen Sie einfach die Hälfte der Gesamtbreite plus die Breite von weniger als einem Bild ein. Der Name der zu drehenden Animation und wie oft sie gedreht wird

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

Stellen Sie den Float so ein, dass alle Bilder in einer Zeile angezeigt werden und die Breite der Bilder

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

Mouseover-Pause einstellen

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

Legen Sie den Animationsnamen und die Richtung des Karussells fest (Animationseffekt).

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

Unten ist der Körperteil

Da die Slideshow im Normalfall anklickbar ist, wird sie im a-Tag platziert.

<Text>
<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>

Es gibt mehr als eine Möglichkeit, ein Karussell zu implementieren. Ich werde es das nächste Mal mit Ihnen teilen!