同时显示4张图片的自动轮播源码
时间: 2024-03-02 21:48:49 浏览: 26
以下是同时显示4张图片的自动轮播源码。
HTML代码:
```
<div class="carousel">
<div class="slides">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
</div>
</div>
```
CSS代码:
```
.carousel {
width: 100%;
overflow: hidden;
}
.slides {
display: flex;
flex-wrap: nowrap;
transition: transform 0.5s ease;
animation: slide 5s infinite;
}
.slides img {
width: 25%;
margin-right: 1%;
}
.carousel:hover .slides {
animation-play-state: paused;
}
.carousel:hover .slides img:last-child {
margin-right: 0;
}
@keyframes slide {
0% {
transform: translateX(0%);
}
20% {
transform: translateX(0%);
}
25% {
transform: translateX(-26%);
}
45% {
transform: translateX(-26%);
}
50% {
transform: translateX(-52%);
}
70% {
transform: translateX(-52%);
}
75% {
transform: translateX(-78%);
}
95% {
transform: translateX(-78%);
}
100% {
transform: translateX(-104%);
}
}
```
该代码基于前面的代码,使用了CSS的动画效果来实现自动轮播。通过@keyframes规则,定义了从0%到100%的动画过程,从而在5秒钟内完成轮播。当鼠标悬停在容器上时,使用animation-play-state属性暂停动画。