html轮播图手写
时间: 2023-07-06 11:24:04 浏览: 116
好的,以下是一个简单的手写 HTML 轮播图:
HTML 代码:
```html
<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="slide1.jpg" alt="Slide 1">
</div>
<div class="slide">
<img src="slide2.jpg" alt="Slide 2">
</div>
<div class="slide">
<img src="slide3.jpg" alt="Slide 3">
</div>
<div class="slide">
<img src="slide4.jpg" alt="Slide 4">
</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>
```
CSS 代码:
```css
.slider {
width: 100%;
height: 500px;
overflow: hidden;
}
.slides {
width: 100%;
height: 500px;
display: flex;
}
.slide {
width: 100%;
height: 500px;
flex-shrink: 0;
position: relative;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.navigation-auto {
display: flex;
justify-content: center;
margin-top: 10px;
}
.auto-btn1, .auto-btn2, .auto-btn3, .auto-btn4 {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #fff;
margin: 0 10px;
cursor: pointer;
transition: all 0.3s ease;
}
.auto-btn1.active, .auto-btn2.active, .auto-btn3.active, .auto-btn4.active {
background-color: #fff;
}
.navigation-manual {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.manual-btn {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid #fff;
margin: 0 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.manual-btn:hover {
background-color: #fff;
}
#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: #fff;
}
#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: #fff;
}
.slider .slide:not(.first) {
opacity: 0;
transition: opacity 1s ease;
}
.slider .slide:first-child {
opacity: 1;
transition: opacity 1s ease;
}
#radio1:checked ~ .slides .first {
opacity: 1;
}
#radio2:checked ~ .slides .first ~ .slide {
opacity: 1;
}
#radio3:checked ~ .slides .first ~ .slide ~ .slide {
opacity: 1;
}
#radio4:checked ~ .slides .first ~ .slide ~ .slide ~ .slide {
opacity: 1;
}
```
上述代码使用了 radio input 标签来控制轮播图的切换,并使用了 CSS 的 transition 和 opacity 属性来实现了淡入淡出的效果。同时,也包含了手动控制和自动控制两种方式的导航按钮。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)