轮播图的html 和 css
时间: 2023-05-18 14:06:18 浏览: 64
实现轮播图的 HTML 和 CSS 可以参考以下代码:
HTML:
```
<div class="slider">
<div class="slides">
<div class="slide"><img src="image1.jpg"></div>
<div class="slide"><img src="image2.jpg"></div>
<div class="slide"><img src="image3.jpg"></div>
</div>
</div>
```
CSS:
```
.slider {
width: 100%;
height: 400px;
overflow: hidden;
position: relative;
}
.slides {
display: flex;
width: 300%;
height: 100%;
transition: transform 0.6s ease;
}
.slide {
width: 33.333%;
height: 100%;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-color: rgba(0,0,0,0.5);
color: #fff;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.prev {
left: 0;
}
.next {
right: 0;
}
.slide.active {
opacity: 1;
z-index: 1;
}
.slide:not(.active) {
opacity: 0;
z-index: 0;
}
```
这段代码实现了一个基本的轮播图,包括图片的切换和左右箭头的控制。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)