如何用纯css写出轮播图

Question

想要用三张图片写一个轮播图出来，但是没学js，如何用css写出来，求一个代码谢谢！

Answer 1

html代码

<div class="slideshow">
    <input type="radio" name="slide" id="slide1" checked>
    <input type="radio" name="slide" id="slide2">
    <input type="radio" name="slide" id="slide3">
    
    <div class="slide slide1"></div>
    <div class="slide slide2"></div>
    <div class="slide slide3"></div>
</div>

对应的CSS

.slideshow {
    position: relative;
    width: 100%;
    max-width: 600px; /* 设置轮播图宽度 */
    margin: auto;
}

.slide {
    position: absolute;
    width: 100%;
    height: 300px; /* 设置轮播图高度 */
    opacity: 0;
    transition: opacity 1s;
}

#slide1:checked ~ .slide1,
#slide2:checked ~ .slide2,
#slide3:checked ~ .slide3 {
    opacity: 1;
}

#slide1:checked ~ .slide1 {
    z-index: 3;
}

#slide2:checked ~ .slide2 {
    z-index: 2;
}

#slide3:checked ~ .slide3 {
    z-index: 1;
}

input[type="radio"] {
    display: none;
}

每张幻灯片都有一个对应的radio按钮。通过radio按钮的选择状态来控制对应幻灯片的显示和隐藏。CSS中使用了相邻兄弟选择器（~）和:checked伪类来实现这种效果。

当用户点击不同的radio按钮时，对应的幻灯片会显示出来，其他幻灯片则会隐藏。通过设置transition属性可以实现渐变的切换效果。