用css 写轮播

最新推荐文章于 2023-04-06 20:31:33 发布

web清白小生

最新推荐文章于 2023-04-06 20:31:33 发布

阅读量97

点赞数

本文链接：https://blog.csdn.net/weixin_45354240/article/details/94574403

版权

使用 html+css布局

在这里插入代码片

<html>
    <head>
       <meta charset="UTF-8">
       <meta name="keywords" content="">
       <meta name="=Description" content="">
        <title>轮播</title>
        <style>
        *{margin: 0px;padding: 0px;}
        #wrap{   
            width: 500px;
            height: 300px;
            background-color: aqua; 
            margin: 100px auto;
            overflow: hidden;
            }
            #list{
                width:120000000px;
                list-style: none;
                translate: 1s;/*过度*/
            }
            #list li{
                float: left;
                width: 500px;
                height: 300px;   
            }
            img{
                width: 100%;
                height: 100%;
            }
            input[type="radio"]{
                display: none;/*t隐藏radio*/
            }
            /*当rad2被选中 list移动*/
            #rad2:checked~#list{
                transform: translateX(-500px)/*css3 变换*/
            }
            #rad3:checked~#list{
                transform: translateX(-1000px)/*css3 变换*/
            }
            #rad4:checked~#list{
                transform: translateX(-1500px)/*css3 变换*/
            }
            #rad5:checked~#list{
                transform: translateX(-2000px)/*css3 变换*/
            }
            #rad6:checked~#list{
                transform: translateX(-2500px)/*css3 变换*/
            }
            #rad7:checked~#list{
                transform: translateX(-3000px)/*css3 变换*/
            }
            #btn{
               position: absolute;
               margin-top: 250px;
               margin-left: 250px;
               transform:translateX(-50%);
            }
            #btn label{
                float: left;
                margin-left:5px;
                width: 30px;
                height: 10px;
                background-color:#fff;
            }
            #btn label:hover{
                background-color: #ff0066;
            }
        </style>
    </head>
    <body>
     <div id="wrap">
         <input type="radio" name="rad" id="rad1">
         <input type="radio" name="rad" id="rad2">
         <input type="radio" name="rad" id="rad3">
         <input type="radio" name="rad" id="rad4">
         <input type="radio" name="rad" id="rad5">
         <input type="radio" name="rad" id="rad6">
         <input type="radio" name="rad" id="rad7">
         <!-- li中放入图片-->
          <ul id="list">
              <li>[外链图片转存失败(img-ETP6TQPO-1562143340572)(https://mp.csdn.net/mdeditor/image/1.jpg)]</li>
              <li>[外链图片转存失败(img-cGQ0SRiC-1562143340574)(https://mp.csdn.net/mdeditor/image/2.jpg)]</li>
              <li>[外链图片转存失败(img-D1npDQ5o-1562143340575)(https://mp.csdn.net/mdeditor/image/3.jpg)]</li>
              <li>[外链图片转存失败(img-T047rWus-1562143340580)(https://mp.csdn.net/mdeditor/image/4.jpg)]</li>
              <li>[外链图片转存失败(img-oJa6wr3V-1562143340582)(https://mp.csdn.net/mdeditor/image/5.jpg)]</li>
              <li>[外链图片转存失败(img-MEPnIk5M-1562143340583)(https://mp.csdn.net/mdeditor/image/6.jpg)]</li>
              <li>[外链图片转存失败(img-ehjQd82i-1562143340583)(https://mp.csdn.net/mdeditor/image/7.jpg)]</li>
          </ul>
          <div id="btn">
                <label for="rad1"></label>
                <label for="rad2"></label>
                <label for="rad3"></label>
                <label for="rad4"></label>
                <label for="rad5"></label>
                <label for="rad6"></label>
                <label for="rad7"></label>
            </div>
     </div>

    </body>
</html>

web清白小生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用css 写轮播

使用css布局在这里插入代码片```<html> <head> <meta charset="UTF-8"> <meta name="keywords" content=""> <meta name="=Description" content=""> <titl...
复制链接

扫一扫