<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
</head>
<style>
/*设置图片的容器*/
.img-list{
width: 200px;
height: 700px;
margin: 0 auto;
position: relative;/*开启相对定位*/
}
/*设置li*/
.img-list li{
position: absolute;
}
/*通过修改元素的层级来显示指定的图片*/
.img-list li:nth-child(2){
z-index: 1;
}
/*设置导航点的样式*/
.pointer{
position: absolute;
z-index: 9999;
bottom: 20px;
left: 40px;
}
.pointer a{
/*设置元素向左浮动*/
float: left;
width: 20px;
height: 20px;
border-radius: 50%;/*圆点*/
margin-left: 4px;/*圆点间距*/
background-color: rgba(255,255,255,.6);/*圆点透明色*/
background-clip: content-box;/*将背景颜色设置到内容区,边框和内边距不再有背景颜色*/
border: 4px solid transparent;/*区分点与其他点*/
}
.pointer a.active,
.pointer a:hover{
/*圆点边框颜色*/
background-color: #fff;
border: 4px solid rgba(255,255,255,.6);
}
</style>
<body>
<ul class="img-list">
<li><a href="javascript:;"><img src="./img/3.jpg" ></a></li>
<li><a href="javascript:;"><img src="./img/4.jpg" ></a></li>
<li><a href="javascript:;"><img src="./img/5.jpg" ></a></li>
<li><a href="javascript:;"><img src="./img/6.jpg" ></a></li>
<li><a href="javascript:;"><img src="./img/7.jpg" ></a></li>
/*注意div的层级,避免被盖住*/
<div class="pointer">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</ul>
</body>
</html>
轮播图制作
最新推荐文章于 2024-07-12 16:55:56 发布