写一个html+css轮播图
时间: 2024-05-16 12:13:21 浏览: 12
以下是一个简单的HTML+CSS轮播图示例:
HTML部分:
```html
<div class="slider">
<div class="slides">
<div class="slide">
<img src="https://via.placeholder.com/800x400/FF5733/FFFFFF?text=Slide%201" alt="Slide 1">
</div>
<div class="slide">
<img src="https://via.placeholder.com/800x400/C70039/FFFFFF?text=Slide%202" alt="Slide 2">
</div>
<div class="slide">
<img src="https://via.placeholder.com/800x400/900C3F/FFFFFF?text=Slide%203" alt="Slide 3">
</div>
</div>
</div>
```
CSS部分:
```css
.slider {
width: 800px;
height: 400px;
margin: 0 auto;
overflow: hidden;
}
.slides {
display: flex;
width: calc(800px * 3);
animation: slide 10s infinite;
}
.slide {
width: 800px;
height: 400px;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-2400px);
}
}
```
解释说明:
- `.slider` 是轮播图的容器,设置了固定的宽和高以及溢出隐藏。
- `.slides` 是轮播图的内容区,使用了flex布局,并设置了一个宽度为三倍的容器宽度,使得三张图片并排显示。
- `.slide` 是每一张图片的容器,设置了固定的宽和高。
- `.slide img` 是图片元素,使用了对象填充模式,使得图片按比例缩放并居中填充整个容器。
- `@keyframes slide` 是动画的关键帧,从0%开始,transform: translateX(0) 表示初始状态,transform: translateX(-2400px) 表示最终状态,即向左平移三张图片的宽度。
这个示例使用了CSS动画来实现轮播效果。可以通过修改`.slides`容器的宽度和`@keyframes slide`动画的最终状态来控制轮播图的数量和滑动速度。