纯css+html左右按钮点击淡出淡入轮播图_前端设计

一个在培训的兄弟问我轮播图怎么做，是他今晚的作业。我说网上找找就能找到了，然后他说找不到，我就给他发一个demo过去。他说要用纯html+css来实现，我当时就懵逼了！！！纯css+html？点击？淡出淡入轮播图？你们老师布局的作业？真的很懵逼。我问css哪来的点击事件？他说不知道！！！当然！老师都说了要用纯css和html来实现。那肯定是有办法实现的，百度是个神奇的东西。然后我肯定是到百度上去查一下了，哈哈...然后经过百度和自己的思考，最终做出来了这个效果...

废话不多说，上代码：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>纯css+html轮播图</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background:url('./image/bg.jpg') no-repeat;
        }
        ul,li{
            list-style:none;
        }
        ul{
            width:650px;
            height:430px;
            border:1px solid #000;
            background:rgba(255,255,255,0.5);
            margin:100px auto;
            position: relative;
            border-radius: 8px;
            overflow: hidden;
        }

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

        .images{
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            opacity: 0;
            transition: 1s;
        }
ul li:nth-of-type(1)>.images{
            opacity: 1;
        }

        img{
            width:100%;
            height:100%;
        }

        .nav label{
            width:150px;
            height:100%;
            line-height:430px;
            position: absolute;
            z-index:10;
            cursor: pointer;
            color:#fff;
            font-size:100px;
            text-align:center;
            background:rgba(255,255,255,0.5);
            text-shadow:0 0 15px rgb(51,51,51);
            opacity: 0;
            display: none;
            transition: opacity .2s;
            touch-callout: none;
        }

        .nav label:last-child{
            right:0;
        }

        .images:hover+.nav label{
            opacity: .5;
        }

        .nav label:hover{
            opacity: .95;
        }

        ul li:nth-of-type(1)>.nav label{
            display: block;
        }

        #photo3:checked~ .three .images{
            opacity: 1
        }

        #photo3:checked~ .three .nav label{
            display: block;
        }

        #photo2:checked~ .two .images{
            opacity: 1
        }

        #photo2:checked~ .two .nav label{
            display: block;
        }

    </style>
</head>
<body>
    <ul>
        <input type="radio" name="photo" id="photo1" />
        <li>
            <div>
                <img src="./image/image1.jpg" />
            </div>
            <div>
                <label for="photo3">&lt;</label>
                <label for="photo2">&gt;</label>
            </div>
        </li>

        <input type="radio" name="photo" id="photo2" />
        <li>
            <div>
                <img src="./image/image2.jpg" />
            </div>
            <div>
                <label for="photo1">&lt;</label>
                <label for="photo3">&gt;</label>
            </div>
        </li>

        <input type="radio" name="photo" id="photo3" />
        <li>
            <div>
                <img src="./image/image3.jpg" />
            </div>
            <div>
                <label for="photo2">&lt;</label>
                <label for="photo1">&gt;</label>
            </div>
        </li>
    </ul>
</body>
</html>

效果图：