Create carousel image with css-CSS Tutorial-php.cn

Create carousel image with css

王林

Release： 2020-02-29 18:01:52

forward

2909 people have browsed it

Create carousel image with css

The following is the style part:

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

Copy after login

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

Copy after login

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

Copy after login

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

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

Copy after login

Set the mouse to slide over and pause

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

Copy after login

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>

Copy after login

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>

Copy after login

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!