js实现图片轮播:html+css直接搞定

关注

原创最新推荐文章于 2026-08-31 00:26:00 发布 525 阅读 AI 写同款· GEO 优化 ›

通过swiper插件制作旋转木马轮播图实现效果： 1.swiper插件准备我们旋转木马轮播图的效果可以通过swiper插件轻松搞定这种效果是不是和我们要做的很像呀，我们只要把它引入我们的案例就ok了在swiper官网的获取swiper下下载swiper-5的压缩包然后解压然后进入js文件夹，复制里面的swiper.min.js文件然后粘贴到我们的项目文件夹中，同理再进入css文件夹，将里面的swiper.min.css复制到项目文件夹中回到我们swiper插件的页面，单击这里的新窗口打开：然后右击点击查看网页源代码：阅读详情

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%;
}