用css 写轮播

原创已于 2024-12-05 17:54:44 修改 · 138 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2019-07-03 16:48:38 首次发布

前端CSS 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了一种使用HTML和CSS布局实现轮播图的方法，通过CSS3的变换和过渡效果，结合radio按钮控制图片切换，实现了流畅的轮播效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 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.youkuaiyun.com/mdeditor/image/1.jpg)]</li>
              <li>[外链图片转存失败(img-cGQ0SRiC-1562143340574)(https://mp.youkuaiyun.com/mdeditor/image/2.jpg)]</li>
              <li>[外链图片转存失败(img-D1npDQ5o-1562143340575)(https://mp.youkuaiyun.com/mdeditor/image/3.jpg)]</li>
              <li>[外链图片转存失败(img-T047rWus-1562143340580)(https://mp.youkuaiyun.com/mdeditor/image/4.jpg)]</li>
              <li>[外链图片转存失败(img-oJa6wr3V-1562143340582)(https://mp.youkuaiyun.com/mdeditor/image/5.jpg)]</li>
              <li>[外链图片转存失败(img-MEPnIk5M-1562143340583)(https://mp.youkuaiyun.com/mdeditor/image/6.jpg)]</li>
              <li>[外链图片转存失败(img-ehjQd82i-1562143340583)(https://mp.youkuaiyun.com/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>