html 使用css3实现多张图片的轮播,不能使用div
时间: 2024-03-14 20:47:30 浏览: 167
可以使用 `<ul>` 和 `<li>` 标签来实现多张图片的轮播,然后使用 CSS3 中的动画效果来实现图片的切换。具体实现步骤如下:
1. HTML 结构部分:
```
<ul class="slider">
<li><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
</ul>
```
2. CSS3 样式部分:
```
.slider {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.slider li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
animation: slide 12s infinite;
}
.slider li:nth-child(1) {
animation-delay: 0s;
}
.slider li:nth-child(2) {
animation-delay: 4s;
}
.slider li:nth-child(3) {
animation-delay: 8s;
}
.slider li img {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes slide {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
25% {
opacity: 1;
}
35% {
opacity: 0;
}
100% {
opacity: 0;
}
}
```
这样就可以实现三张图片的轮播效果了,当然也可以添加更多的图片,只需要在 HTML 结构中添加更多的 `<li>` 元素即可。
阅读全文