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 代码：

.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 属性来实现了淡入淡出的效果。同时，也包含了手动控制和自动控制两种方式的导航按钮。