网页轮播图

最新推荐文章于 2024-10-11 15:51:17 发布

云上空间

最新推荐文章于 2024-10-11 15:51:17 发布

阅读量774

点赞数 18

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_65348671/article/details/135716381

版权

文章目录

代码
效果图
需要源代码，留言联系

代码

鉴于目前水平，只用纯html实现样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
    /*消除基础样式，避免影响总体布局*/
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li{
            list-style: none;
        }

        /* 整体 */
        .banner{
        /*父相子绝，使子级压在父标签上*/
            position: relative;
            /*版心居中*/
           margin: 100px auto;
           width: 564px;
           height: 315px;
           /* 隐藏掉多余的信息 */
           overflow: hidden;
        }
        .banner ul{
        /*子级li可以水平排列*/
            display: flex;
        }
        .banner img{
            width: 564px;
            border-radius: 12px;
            /*消除图片的下方空白*/
            vertical-align: middle;
        }


        /* 箭头 */
        .banner .prev,
        .banner .next{
            /* 隐藏 */
            display: none;
            /*子级绝对定位*/
            position: absolute;
            /*按父级高度下降一半*/
            top: 50%;
            /*向上平移自身高度一半，使自身在父级图片正中央*/
            transform: translateY(-50%);
			/*宽度，高度，+背景色*/
            width: 20px;
            height: 20px;
            background-color: rgb(0, 0, 0,0.3);
			/*因为箭头是文字属性且是超链接，这一步为了消除a自带的下划线效果，且使箭头有独特属性*/
            text-decoration: none;
            color: #fff;
            line-height: 20px;
        }
		/*两个箭头在鼠标悬停时显示为块级*/
        .banner:hover .prev,
        .banner:hover .next{
            display: block;
        }

		
		/*单独设置两个箭头样式*/
        .banner .prev{
            left: 0;
            border-radius: 0 15px 15px 0;
        }
		
        .banner .next{
            right: 0;
            border-radius: 15px 0 0 15px;
            text-align: center;
        }

        /* 圆点 */
        .banner ol{
        /*在父级图片之上*/
            position: absolute;
            /*调整位置，与上面的箭头位置步骤类似*/
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
			/*特有的文字属性*/
            height: 13px;
            background-color: rgba(255, 255, 255, 0.3);
			/*小圆点水平排列*/
            display: flex;
            border-radius: 10px;
        }

        .banner ol li{
            width: 8px;
            height: 8px;
            background-color: #fff;
            border-radius: 50%;
            margin: 3px;
			/*鼠标悬停显示小手*/
            cursor: pointer;
        }
		/*当点击时，小圆点显示为橙色*/
        .banner ol .active{
            background-color: #ff5000;
        }
    </style>
</head>
<body>
    <div class="banner">
        <!-- 图 -->
        <ul>
            <li><a href="#"><img src="./images/banner1.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/banner2.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/banner3.jpg" alt=""></a></li>
        </ul>
        <!-- 箭头 -->
        <!-- 上一张 -->
        <a href="#" class="prev">
            <i class="iconfont icon-zuoce"></i>
        </a>
        <!-- 下一张 -->
        <a href="#" class="next">
            <i class="iconfont icon-youce"></i>
        </a>

        <!-- 圆点 -->
        <ol>
            <li class="active"></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</body>
</html>