js实现图片轮播:html+css直接搞定_class="slidershow-优快云博客

本文链接：https://blog.youkuaiyun.com/JavaKobeBryant/article/details/105574703

本文详细介绍了如何使用HTML和CSS创建一个简单的图片轮播效果，包括输入元素的巧妙运用，图片过渡动画的设置，以及导航栏的设计，为前端开发者提供了一个实用的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<div class="slidershow middle">
                <div class="slides">
                    <input type="radio" name="r" id="r1" checked>
                    <input type="radio" name="r" id="r2">
                    <input type="radio" name="r" id="r3">
                    <input type="radio" name="r" id="r4">
                    <div class="slide s1">
                        <img src="/default/img/sort-right/sort-right01.jpg">
                    </div>
                    <div class="slide">
                        <img src="/default/img/sort-right/sort-right02.jpg">
                    </div>
                    <div class="slide">
                        <img src="/default/img/sort-right/sort-right03.jpg">
                    </div>
                    <div class="slide">
                        <img src="/default/img/sort-right/sort-right04.jpg">
                    </div>

                    <div class="navigation">
                        <label for="r1" class="bar"></label>
                        <label for="r2" class="bar"></label>
                        <label for="r3" class="bar"></label>
                        <label for="r4" class="bar"></label>
                    </div>
               </div>
</div>

CSS

.slidershow {
    width: 730px;
    height: 340px;
    overflow: hidden;
}

.middle {
    position: relative;
    top: 0px;
    left: 20px;
}

.navigation {
    position: absolute;
    bottom: 0px;
    left: 35%;
    display: flex;
}

.bar {
    width: 40px;
    height: 10px;
    border: 2px solid white;
    margin: 6px;
    cursor: pointer;
}

.bar:hover {
    background-color: white;
}

input[name="r"] {
    position: relative;
    visibility: hidden;
}

.slides {
    width: 400%;
    height: 100%;
    display: flex;
}

.slide {
    width: 25%;
    transition: 0.6s;
}

.slide img {
    width: 730px;
    height: 340px;
}

#r1:checked ~ .s1 {
    margin-left: 0;
}

#r2:checked ~ .s1 {
    margin-left: -25%;
}

#r3:checked ~ .s1 {
    margin-left: -50%;
}

#r4:checked ~ .s1 {
    margin-left: -75%;
}