用html和css写一个轮播图
时间: 2023-09-22 07:11:36 浏览: 49
以下是一个简单的html和css写的轮播图示例:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>轮播图</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="slider">
<div class="slides">
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<input type="radio" name="radio-btn" id="radio4">
<div class="slide first">
<img src="https://picsum.photos/800/300?random=1" alt="">
</div>
<div class="slide">
<img src="https://picsum.photos/800/300?random=2" alt="">
</div>
<div class="slide">
<img src="https://picsum.photos/800/300?random=3" alt="">
</div>
<div class="slide">
<img src="https://picsum.photos/800/300?random=4" alt="">
</div>
<div class="navigation-auto">
<div class="auto-btn1"></div>
<div class="auto-btn2"></div>
<div class="auto-btn3"></div>
<div class="auto-btn4"></div>
</div>
</div>
<div class="navigation-manual">
<label for="radio1" class="manual-btn"></label>
<label for="radio2" class="manual-btn"></label>
<label for="radio3" class="manual-btn"></label>
<label for="radio4" class="manual-btn"></label>
</div>
</div>
</body>
</html>
```
CSS代码:
```
.slider {
width: 800px;
margin: 0 auto;
position: relative;
}
.slides {
display: flex;
width: 100%;
height: 300px;
}
.slides input {
display: none;
}
.slide {
width: 100%;
height: 300px;
transition: opacity 1s ease;
}
.first {
background-image: url("https://picsum.photos/800/300?random=1");
background-size: cover;
background-position: center;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.navigation-auto {
display: flex;
position: absolute;
bottom: 20px;
left: 50%;
transform: translate(-50%);
}
.auto-btn1, .auto-btn2, .auto-btn3, .auto-btn4 {
width: 15px;
height: 15px;
border-radius: 50%;
margin: 0 5px;
background-color: #bbb;
cursor: pointer;
transition: background-color 0.5s ease;
}
#radio1:checked ~ .navigation-auto .auto-btn1,
#radio2:checked ~ .navigation-auto .auto-btn2,
#radio3:checked ~ .navigation-auto .auto-btn3,
#radio4:checked ~ .navigation-auto .auto-btn4 {
background-color: #333;
}
.navigation-manual {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.manual-btn {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin: 0 5px;
background-color: #fff;
cursor: pointer;
transition: background-color 0.5s ease;
}
#radio1:checked ~ .navigation-manual .manual-btn:nth-child(1),
#radio2:checked ~ .navigation-manual .manual-btn:nth-child(2),
#radio3:checked ~ .navigation-manual .manual-btn:nth-child(3),
#radio4:checked ~ .navigation-manual .manual-btn:nth-child(4) {
background-color: #333;
}
#radio1:checked ~ .slides .first {
opacity: 1;
}
#radio2:checked ~ .slides .first {
opacity: 0;
}
#radio2:checked ~ .slides .slide:nth-child(2) {
opacity: 1;
}
#radio3:checked ~ .slides .slide:nth-child(2) {
opacity: 0;
}
#radio3:checked ~ .slides .slide:nth-child(3) {
opacity: 1;
}
#radio4:checked ~ .slides .slide:nth-child(3) {
opacity: 0;
}
#radio4:checked ~ .slides .slide:nth-child(4) {
opacity: 1;
}
@media (max-width: 768px) {
.slider {
width: 100%;
}
.slides {
height: 200px;
}
.first {
background-size: cover;
background-position: center;
}
}
```
这个轮播图使用了radio button来实现轮播,通过CSS的伪类选择器来控制轮播图的切换效果。其中,navigation-auto是轮播图下面的圆点,navigation-manual是轮播图下面的小圆点。可以通过修改其中的图片和样式来实现自己的轮播图效果。