Créer une image carrousel avec CSS-tutoriel CSS-php.cn

Créer une image carrousel avec CSS

王林

Libérer： 2020-02-29 18:01:52

avant

2856 Les gens l'ont consulté

Créer une image carrousel avec CSS

Ce qui suit est la partie style :

<style>
    *{margin:0;padding:0;}
    a{text-decoration:none}
    li{list-style:none;}

Copier après la connexion

La largeur du design ne doit pas dépasser la largeur totale de l'image du carrousel, plus la largeur de la première image (plus la première image La largeur est pour que l'effet carrousel soit visible) La mienne est une largeur de 1500 et une hauteur de 200, puis définissez le masquage du débordement (pour éliminer le mouvement hors de la zone d'affichage et toujours afficher)

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

Copier après la connexion

1000% est une façon paresseuse d'écrire, afin de définir la largeur de ul plus large.

(Tutoriel recommandé : Tutoriel d'introduction CSS)

Le nom de l'animation du carrousel, combien de temps il faut pour tourner une fois

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

Copier après la connexion

Définir float sur faire toutes les images Affichage d'une ligne et la largeur de l'image

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

Copier après la connexion

Définir la pause lorsque la souris survole

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

Copier après la connexion

Définir le nom de l'animation de l'animation et la direction de déplacement du carrousel (animation effet)

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

Copier après la connexion

Ce qui suit est la partie du corps

Les images du carrousel sont généralement accessibles en cliquant, elles sont donc placées dans la balise a

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

Copier après la connexion

Pour plus de détails sur la programmation contenu, veuillez faire attention à la colonne Introduction à la programmation sur le site Web PHP chinois !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!