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

程序员文章站 2022-05-26 19:55:45

...

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

完整代码如下：

<!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>