纯css轮播图

晴天阿良

已于 2022-06-29 14:12:13 修改

阅读量473

点赞数 3

分类专栏： h5+css3 文章标签： css css3 html

于 2022-06-28 14:39:31 首次发布

本文链接：https://blog.csdn.net/m0_64941684/article/details/125501314

版权

h5+css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言：

一般而言用js实现轮播图，简单方便，但对于只是学到css与html的同学而言，像要实现轮播图太过困难，博主也曾翻看过许多相关教程，大多不是功能不全，就是带有js的代码，又或者出来一堆很偏的代码，经过博主的无数次坚持，终于有一个相对完善且奇思妙想的一个想法，最终实现，
这里图片可自行去改，如有问题可直接评论询问
效果在此：https://live.csdn.net/v/220011?spm=1001.2014.3001.5501

代码奉上

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击版轮播图</title>
    <style>
        .lun-main {
            position: relative;
            top: 100px;
            left: 1000px;
            width: 600px;
            height: 300px;
             overflow: hidden; 
            border-radius: 5px;
            /* 圆角 */
            background-color: black;
        }

        .lun-main:hover {
            animation-play-state: paused;
        }



        .lun-item {

            margin-top: 25px;
            position: absolute;
            /* 相对定位 */
            top: 0;
            width: 100%;
            height: 300px;
            transition: all 0.5s;
            /* 给个过渡效果，后面切图时好看 */
            background-size: cover;
            /*把背景图像扩展至足够大，以使背景图像完全覆盖背景区域 */

        }

        .lun-item1 {
            left: 0;
        }

        .lun-item2 {
            top: 100%;
        }

        .lun-item3 {
            /* background-image: url(../king/images/马克.jpg) width=400px height=300px;; */
            /* background: url(../king/images/轮播图3.jpeg) no-repeat 0 0;
            background-size: cover; */
            top: 200%;
        }

        input {
            position: relative;
            z-index: 100;
            /* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面 */
            display: none;
            /* 主要作用是小圆点的隐藏 */
        }

        .lun-select {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            /* 先x轴定位走50%再偏移自身的50%，实现左右居中。与left：50%共同使用 */
            width: 250px;
            height: 25px;
            color: white;
            /* z-index: 1; */
            display: flex;
            justify-content: space-between;
            /* 小圆点的间距 */
            align-items: center;
            /* flex布局，能让子元素两边贴边后再动态平分剩下空间排列这三个一起使用 */

        }


        .lun-select>lun-label {
            /* border:1px solid red; */
            width: 80px;
            height: 25px;
            background-color: #000;
            /* border-radius: 50%; */
            cursor: pointer;
            /* 鼠标样式为小手。 */
            /* border: 1.5px solid white; */
        }

        .lun-main input:nth-of-type(1):checked~.lun-select lun-label:nth-of-type(1) {
            color: #f3c258;
        }

        .lun-main input:nth-of-type(2):checked~.lun-select lun-label:nth-of-type(2) {
            color: #f3c258;
        }

        .lun-main input:nth-of-type(3):checked~.lun-select lun-label:nth-of-type(3) {
            color: #f3c258;
        }

        /* 首先 ~ 波浪符可以选择位于跟它同一层的后面所有的某元素，不管它位置在哪。

就是 .main input:nth-of-type(1):checked 表示被选中的第一个radio单选按钮

~ 选择后面的跟他同一层的.select 

.select label:nth-of-type(1) .select 又选择它的第一个label子元素

background-color: rgb(26, 26, 26); 将这个label子元素背景色设置为黑色。

大概就是上面这个流程。然后其它两个按钮也是以此类推。 */
        .lun-main input:nth-of-type(1):checked~.lun-item {
            transform: translateX(0);
            /* background: url(../king/images/云缨.jpg) no-repeat 0 0;
            background-size:cover; */
            animation: lun-switch1 5s infinite;
            /* animation-play-state: paused; */
        }
        .lun-main input:nth-of-type(2):checked~.lun-item {
            transform: translateY(-100%);
            animation: lun-switch2 5s infinite;
        }
        .lun-main input:nth-of-type(3):checked~.lun-item {
            transform: translateY(-200%);
            animation: lun-switch3 5s infinite;
        }
        /* 上面部分为实现点击效果 */

        .lun-main input:nth-of-type(1):checked~.lun-item1:hover {
            animation-play-state: paused;
        }

        .lun-main input:nth-of-type(2):checked~.lun-item2:hover {
            animation-play-state: paused;
        }

        .lun-main input:nth-of-type(3):checked~.lun-item3:hover {
            animation-play-state: paused;
        }.lun-ppt {
            position: relative;
            width: 18000px;
            height: 900px;
            display: block;
        }

        .lun-ppt img {
            position: relative;
        }
        @keyframes lun-switch1 {
            /* 0% {}; */
            5% {
                transform: translateX(0px);
            }
            25% {
                transform: translateX(0px);
            }
            30% {
                transform: translateX(-600px);
            }
            50% {
                transform: translateX(-600px);
            }
            55% {
                transform: translateX(-1200px);
            }
            75% {
                transform: translateX(-1200px);
            }
            80% {
                transform: translateX(-1800px);
            }
            100% {
                transform: translateX(-1800px);
            }
        }

        

        

        @keyframes lun-switch2 {
            0% {};
            5% {
                transform: translate(0,-300px);
            }

            25% {
                transform: translate(0,-300px);
            }

            30% {
                transform: translate(-600px, -300px);
            }
            50% {
                transform: translate(-600px, -300px);
            }
            55% {
                transform: translate(-1200px, -300px);
            }
            75% {
                transform: translate(-1200px, -300px);
            }
            80% {
                transform: translate(-1800px, -300px);
            }
            100% {
                transform: translate(-1800px, -300px);
            }
        }
        @keyframes lun-switch3 {
            0% {}

            ;

            5% {
                transform: translate(0,-600px);
            }

            25% {
                transform: translate(0,-600px);
            }

            30% {
                transform: translate(-600px, -600px);
            }
            50% {
                transform: translate(-600px, -600px);
            }
            55% {
                transform: translate(-1200px, -600px);
            }
            75% {
                transform: translate(-1200px, -600px);
            }
            80% {
                transform: translate(-1800px, -600px);
            }
            100% {
                transform: translate(-1800px, -600px);
            }
        }

        /* .main input:nth-of-type(1):checked 表示被选中的第一个radio单选按钮

~ .item 选择后面的跟他同一层的所有 .item

然后在x轴偏移相对的距离就好 */
    </style>
</head>

<body>
    <!--  底层盒子 -->
    <div class="lun-main">

        <!-- 三个单选按钮，先默认选择第一个 -->
        <input type="radio" name="choose" id="choose1" checked>
        <input type="radio" name="choose" id="choose2">
        <input type="radio" name="choose" id="choose3">
        <!-- 放三张图片，用背景图片表示 -->
        <div class="lun-item lun-item1">
            <div class="lun-ppt">
                <img src="./images/轮播图1.jpeg" width=600px height=275px; />
                <img src="./images/轮播图2.jpeg" width=600px height=275px; />
                <img src="./images/轮播图3.jpeg" width=600px height=275px; />
                <img src="./images/轮播图1.jpeg" width=600px height=275px; />
            </div>
        </div>
        <div class="lun-item lun-item2">
            <div class="lun-ppt">
                <img src="./images/轮播图2.jpeg" width=600px height=275px; />
                <img src="./images/轮播图3.jpeg" width=600px height=275px; />
                <img src="./images/轮播图1.jpeg" width=600px height=275px; />
                <img src="./images/轮播图2.jpeg" width=600px height=275px; />
            </div>
        </div>
        <div class="lun-item lun-item3">
            <div class="lun-ppt">
                <img src="./images/轮播图3.jpeg" width=600px height=275px; />
                <img src="./images/轮播图1.jpeg" width=600px height=275px; />
                <img src="./images/轮播图2.jpeg" width=600px height=275px; />
                <img src="./images/轮播图3.jpeg" width=600px height=275px; />
            </div>
        </div>
        <!-- 三个label标签 -->
        </span>

        <span class="lun-select">
            <label for="choose1">1</label>
            <label for="choose2">2</label>
            <label for="choose3">3</label>
    </div>
</body>
<html>