轮播图代码封装

最新推荐文章于 2022-10-11 16:43:02 发布

HAI6545

最新推荐文章于 2022-10-11 16:43:02 发布

阅读量298

点赞数 1

分类专栏： JavaScript案例文章标签： css html css3

本文链接：https://blog.csdn.net/HAI6545/article/details/122309327

版权

本文详细介绍了如何使用CSS3技术封装一个功能完善的轮播图组件，包括图片切换、自动播放、箭头导航和dots指示器等功能。通过实例代码解析，帮助读者掌握轮播图的实现原理和技巧。

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


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style> 
.carousel{
    width: 600px;
    height: 300px;
    border:1px solid #000;
    margin:50px auto;
    position: relative;
}
.carousel ul, .carousel ol{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.carousel ul li{
    display:none;
}
.carousel ul li.active{
    display: block;
}
.carousel ul li a img{
    width: 600px;
    height: 300px;
}
.carousel ol{
    height: 20px;
    background-color: rgba(255,255,255,.7);
    border-radius:10px;
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
}
.carousel ol li{
    width: 10px;
    height: 10px;
    background-color: #000;
    float:left;
    border-radius:50%;
    margin:5px;
}
.carousel ol li.active{
    background-color: #f00;
}
.carousel span{
    width: 20px;
    height: