纯css3实现的轮播图效果（表单制作轮播图）

我就是我 2022-05-14 09:56 269阅读 0赞

主要是使用css3新增的伪类选择器，利用表单制作的轮播图效果，效果图如下所示

![70][]

完整代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>纯css实现轮播图效果</title>
        <style>
            .wrap{width:500px; height:320px;
                position:relative; margin:50px auto;
                border:5px solid #f00;
                overflow:hidden;
            }
            input{display:none;}
            ul,li{margin:0; padding:0; list-style:none;}
            .wrap .label{
                position:absolute;
                bottom:10px;
                left:50%;
                transform:translateX(-50%);
                z-index:10;
            }
            .wrap .label label{
                display:inline-block; width:10px; height:10px; border:1px solid #000;
                background:#fff; border-radius:50%;
            }
            .list{width:400%; transition:1s;}
            .list li{float:left; width:500px; height:320px;}
            .list img{width:100%; height:100%;}
            input:nth-of-type(1):checked~.list{
                transform:translateX(0%);
            }
            input:nth-of-type(2):checked~.list{
                transform:translateX(-25%);
            }
            input:nth-of-type(3):checked~.list{
                transform:translateX(-50%);
            }
            input:nth-of-type(4):checked~.list{
                transform:translateX(-75%);
            }
    
            input:nth-of-type(1):checked~span label:nth-of-type(1){
                background:orange;
            }
            input:nth-of-type(2):checked~span label:nth-of-type(2){
                background:orange;
            }
            input:nth-of-type(3):checked~span label:nth-of-type(3){
                background:orange;
            }
            input:nth-of-type(4):checked~span label:nth-of-type(4){
                background:orange;
            }
    
        </style>
    </head>
    <body>
    <div class="wrap">
        <input id="checked1" checked type="radio" name="siwper"/>
        <input id="checked2" type="radio" name="siwper"/>
        <input id="checked3" type="radio" name="siwper"/>
        <input id="checked4" type="radio" name="siwper"/>
       <span class="label">
           <label for="checked1"></label>
           <label for="checked2"></label>
           <label for="checked3"></label>
           <label for="checked4"></label>
       </span>
        <ul class="list">
            <li><img src="imgs/ad_1.jpg" alt=""/></li>
            <li><img src="imgs/ad_2.jpg" alt=""/></li>
            <li><img src="imgs/ad_3.jpg" alt=""/></li>
            <li><img src="imgs/ad_4.jpg" alt=""/></li>
        </ul>
    </div>
    </body>
    </html>

[70]: /images/20220514/f98d5a7e72e14fca8321b9e6d54bb9ee.png