手写轮播图结构样式

最新推荐文章于 2022-07-10 23:57:14 发布

qq_45773127

最新推荐文章于 2022-07-10 23:57:14 发布

阅读量159

点赞数

本文链接：https://blog.csdn.net/qq_45773127/article/details/104809024

版权

<div class="box">
        <!-- 因为图片是多张滚动 所以我们用ul嵌套li书写 -->
        <!-- 图片轮播 -->
        <ul>
            <li><a href="#"><img src="img/taobao.jpg" alt=""></a></li>
        </ul>
        <!-- 左右按钮  -->
        <span class="arr_l">左</span>
        <span class="arr_r">右</span>
        <!-- 切换的小圆点 -->
        <ol>
            <li></li>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>

        .box {
            position: relative;
            width: 520px;
            height: 280px;
            margin: 100px auto;
            background: pink;
        }
        .box .arr_l,
        .box .arr_r {
            position: absolute;
            top:50%;
            width: 30px;
            height: 30px;
            margin-top: -15px;
            background: rgba(0, 0, 0, .5);
            color: #fff;
        }
        .box .arr_l {
            left: 0;
        }
        .box .arr_r {
            right: 0;
        }
        .box ol {
            position: absolute;
            left: 50%;
            margin-left: -35px;
            bottom: 20px;
            width: 70px;
            height: 14px;
            background: rgba(255, 255, 255,.5);
            border-radius: 7px;
        }
        .box ol li {
            float: left;
            width: 8px;
            height: 8px;
            margin: 3px;
            background: #fff;
            border-radius: 50%;
        }
        .box ol .current {
            background: orangered;
        }