帮我写一段轮播图的html代码
时间: 2023-05-25 10:02:32 浏览: 86
html图片轮播代码
5星 · 资源好评率100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
.carousel {
width: 500px;
height: 300px;
margin: auto;
position: relative;
overflow: hidden;
}
.carousel img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity .5s ease;
}
.carousel img.active {
opacity: 1;
}
.carousel .prev, .carousel .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
font-size: 25px;
color: #fff;
text-shadow: 2px 2px 2px black;
}
.carousel .prev {
left: 20px;
}
.carousel .next {
right: 20px;
}
.carousel .dots {
width: 100%;
text-align: center;
position: absolute;
bottom: 10px;
}
.carousel .dots span {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #aaa;
margin: 0 5px;
cursor: pointer;
}
.carousel .dots span.active {
background-color: #fff;
}
</style>
</head>
<body>
<div class="carousel">
<img src="img/slide1.jpg" alt="slide1" class="active">
<img src="img/slide2.jpg" alt="slide2">
<img src="img/slide3.jpg" alt="slide3">
<img src="img/slide4.jpg" alt="slide4">
<img src="img/slide5.jpg" alt="slide5">
<div class="prev"><</div>
<div class="next">></div>
<div class="dots">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="js/carousel.js"></script>
</body>
</html>
阅读全文