css3轮播图案例

saddhu.

于 2024-01-18 15:01:48 发布

阅读量785

点赞数 8

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/2303_77073508/article/details/135674861

版权

本文详细介绍了如何使用HTML和CSS创建一个基本的轮播图，包括使用flex布局控制图片展示和鼠标悬停时的导航切换效果。

摘要由CSDN通过智能技术生成

轮播图案例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li {
            list-style: none;
        }
        .banner {
            margin: 100px auto;
            width: 554px;
            height: 315px;
            /* background-color: pink; */
            overflow: hidden;
            position:relative;     
        }
        .banner img {
            width: 564px;
            height: 315px;
            border-radius: 5%;
            vertical-align: middle;
        }
        .banner ul {
            display: flex;
        }
        .banner .zuo,
        .banner .you {
            /* 因为我们想让两边的标签
            只有鼠标悬停的时候才出现
            所以这里我们先将两个标签的显示属性设置为none*/
            display: none;
            position: absolute;
            width: 20px;
            height: 30px;
            top: 50%;
            transform: translateY();
            background-color: rgba(0,0,0,0.3);
            text-decoration: none;
            color: white;
            line-height: 30px;
        }
        .banner .zuo{
            left: 0;
            border-radius: 0 15px 15px 0;
        }
        .banner .you{
            right: 0;
            border-radius:15px 0 0 15 px;
            text-align: center;
        }
        .banner:hover .zuo, .banner:hover .you {
            /* 这边设置的是鼠标悬停时标签才会出现 */
            display: block;
        }
        .banner ol {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            height: 13px;
            background-color: rgba(255,255,255,0);
            display: flex;
        }
        .banner ol li {
            
            margin: 3px;
            width: 8px;
            height: 8px;
            background-color: #fff;
            border-radius: 50%;
            cursor: pointer;
        }
        .banner ol .active{
            background-color: #ff5000;
        }
    </style>
</head>
<body>
    <div class="banner">
        <ul>
            <li><a href="#"><img src="./images/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/3.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
        </ul>
        <!-- 注意这边可以去阿里图标库中寻找图标，然后导入
        这边使用简易版本 -->
        <a href="#" class="zuo"><</a>
        <a href="#" class="you">></a>
        <ol>
            <li class="active"></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</body>
</html>