京东⾸页轮播图练习
没有js的加持，有些效果没有实现，本案例练习的重点是定位和布局，后⾯学习了js之后继续完善。理解相对定位和绝对定位的使⽤。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东⾸页轮播图</title>
<link rel="stylesheet" href="reset.css">
<style>
/* 设置容器 */
.lunbo{
width: 590px;
height: 470px;
margin-top:50px;
margin-left:50px;
/* 为div设置相对定位，⽬的是使pointer可以相对于div定位，⽽不是相对于初始包含块定位 */
position: relative;
/* overflow:hidden;  */
}
/* 设置li */
.lunbo li{
width: 590px;
height: 470px;
position: absolute;;
float: left;
}
/* 通过修改图⽚的层级来切换图⽚ */
.lunbo li:nth-child(){
z-index: 1;
}
/* 设置导航点的样式 */
.pointer{
position: absolute;
z-index: 9999;
bottom:20px;
left: 40px;js实现轮播图最简代码
}
.pointer a{
/* 设置元素向左浮动 */
float: left;
width: 10px;
height: 10px;
background-color:rgba(255,255,255,.3);
border-radius: 50%;
margin-left: 8px;
/* 设置透明⾊的边框，保持样式⼤⼩⼀致 */
border:2px solid transparent;
/* 将背景颜⾊设置到内容区，不会延伸到边框和内边距 */
background-clip:content-box;
}
.pointer a.active,.pointer a:hover{
background-color:#fff ;
border:2px solid rgba(255,255,255,.3);
}
</style>
</head>
<body>
<div class="lunbo">
<li><a href="#"><img src="01.jpg" alt="轮播第⼀张"></a></li>
<li><a href="#"><img src="02.jpg" alt="轮播第⼆张"></a></li>
<li><a href="#"><img src="03.jpg" alt="轮播第三张"></a></li>
<li><a href="#"><img src="04.jpg" alt="轮播第四张"></a></li>
<li><a href="#"><img src="05.jpg" alt="轮播第五张"></a></li>
<li><a href="#"><img src="06.jpg" alt="轮播第六张"></a></li>
<li><a href="#"><img src="07.jpg" alt="轮播第七张"></a></li>
<li><a href="#"><img src="08.jpg" alt="轮播第⼋张"></a></li>
<div class="pointer">
<a class="active" href="#"></a>
<a class="active" href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。