欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

纯css3实现的轮播图效果(表单制作轮播图)

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

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

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