使用css实现轮播图

最新推荐文章于 2024-04-15 10:28:24 发布

qq_44867505

最新推荐文章于 2024-04-15 10:28:24 发布

阅读量836

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/qq_44867505/article/details/109545003

版权

使用css实现轮播图
html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css轮播图.css">
</head>
<body>
<div class="content-main">
    <!--焦点图-->
    <div class="banner">
        <ul>
            <li><img src="img/轮播1.jpg" alt=""></li>
            <li><img src="img/轮播2.jpg" alt=""></li>
            <li><img src="img/轮播3.jpg" alt=""></li>
            <li><img src="img/轮播1.jpg" alt=""></li>
        </ul>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

</body>
</html>

css代码：

body {
    width: 100%;
    min-width: 320px;
    max-width: 750px;
    /*background-color: #ffc11e;*/
    margin: 0 auto;
    font-size: 14px;
    height: 2000px;
    color: #fff;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
/*焦点图*/
.banner{
    position: relative;
    width: 100%;
    overflow: hidden;
}
.banner ul:nth-child(1){
    width:400%;
    animation: move 3s linear 0s infinite;
}

.banner ul:nth-child(1) li{
    width: 25%;
    float: left;
}
.banner ul:nth-child(1) li img{
    width:100%;
}
/*图片计数器*/
.banner ul:nth-child(2){
    position: absolute;
    bottom: 6px;
    left: 50%;
    margin-left: -50px;
    width: 100px;
    height: 6px;
    /*border: 1px solid #000;*/
}
.banner ul:nth-child(2) li{
    width: 12px;
    height: 6px;
    float: left;
    border-radius: 3px;
    border: 1px solid #000;
    box-sizing: border-box;
    margin-left: 10px;
}
.banner ul:nth-child(2) li:nth-child(1){
    margin-left:0;
}
.banner ul:nth-child(2) li:nth-child(4){
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ffffff;
    animation: sport 3s linear 0s infinite;
}
@keyframes move {
    0%{
        margin-left: 0;
    }
    33%{
        margin-left: 0%;
    }
    34%{
        margin-left: -100%;
    }
    67%{
        margin-left: -100%;
    }
    68%{
        margin-left: -200%;
    }
    99%{
        margin-left: -200%;
    }
    100%{
        margin-left: -300%;
    }
}
@keyframes sport {
    0%{
        margin-left: 0;
    }
    33%{
        margin-left: 0;
    }
    34%{
        margin-left: 22px;
    }
    67%{
        margin-left: 22px;
    }
    68%{
        margin-left: 44px;
    }
    99%{
        margin-left: 44px;
    }
    100%{
        margin-left: 0px;
    }
}