Home > Article > Web Front-end > Create carousel image with css

Create carousel image with css

王林forward: 2020-02-29 18:01:522850browse

The following is the style part:

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

The design width should not exceed the total width of the carousel image, plus the width of the first image (plus the first image The width is for the carousel effect to be visible) Mine is a width of 1500 and a height of 200, and then set the overflow hiding (to eliminate the movement out of the display area and still display)

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

1000% is a lazy way of writing, In order to set the width of ul wider.

(Recommended tutorial: CSS Getting Started Tutorial)

The name of the carousel animation, how long it takes to rotate once

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

Set float to make all images One line display and the width of the picture

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

Set the mouse to slide over and pause

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

Set the animation name of the animation and the movement direction of the carousel (animation effect)

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

The following is the body part

Carousel pictures can generally be accessed by clicking, so they are placed in the a tag

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

For more programming-related content, please pay attention to the Programming Introduction column on the php Chinese website!

The above is the detailed content of Create carousel image with css. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:jb51.net. If there is any infringement, please contact admin@php.cn delete

Previous article：css implements ellipses display when text is too longNext article：css implements ellipses display when text is too long

See more

Create carousel image with css

Related articles