CSS realizes carousel effect (with code)

CSS to achieve carousel effect (with code)

Theoretical basis

CSS3 animation properties and @keyframes rules

Main idea

1. Prepare multiple images of the same size

2 , Arrange the pictures to be displayed horizontally in a picture container

3. Add a display container outside the picture container, and the size of the display container is the size of the picture

4. Add custom animation to the picture container , set incremental offset values ​​at different stages of animation

Notes

• The animation effect is divided into two parts: switching and staying

• The custom animation stage is related to the number of pictures

• The offset value of each stage of the animation is related to the picture size

• There is no switching effect from the last picture to the first picture in the example in this article. One idea is to switch from the last picture to the first picture one by one

HTML

<p id="container">
    <p id="photo">
        <img  src="/static/imghwm/default1.png"  data-src="1.png"  class="lazy"   / alt="CSS realizes carousel effect (with code)" >
        <img  src="/static/imghwm/default1.png"  data-src="2.png"  class="lazy"   / alt="CSS realizes carousel effect (with code)" >
        <img  src="/static/imghwm/default1.png"  data-src="3.png"  class="lazy"   / alt="CSS realizes carousel effect (with code)" >
    </p>
</p>

Analysis:
Three img elements are created here. Outside the img element is a picture container, and outside the picture container is a display container.

CSS

#container {
	width: 400px;
	height: 300px;
	overflow: hidden;
}

#photo {
	width: 1200px;
	animation: switch 5s ease-out infinite;
}

#photo > img {
	float: left;
	width: 400px;
	height: 300px;
}

@keyframes switch {
	0%, 25% {
		margin-left: 0;
	}
	35%, 60% {
		margin-left: -400px;
	}
	70%, 100% {
		margin-left: -800px;
	}
}

Analysis:

1. The size of the display container is consistent with the size of the image

2. Add a float effect to the image. There is no need to consider the troublesome margin issue

3. Since the example only has three pictures, three animation stages are added. Each stage achieves the switching effect by setting an increasing margin-left value

4. The set animation stage (such as 35%~60%) is the animation stay part, and the free time of the previous stage (such as 25%~35%) is the animation switching part. The length of each part needs to be controlled by yourself.

Operation effect

Thank you all for reading, I hope you will benefit a lot.

This article is reproduced from: https://blog.csdn.net/u011848617/article/details/80468463

Recommended tutorial: "CSS Tutorial"

The above is the detailed content of CSS realizes carousel effect (with code). For more information, please follow other related articles on the PHP Chinese website!