<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/common.css"/>
<style>
.slider{
width: 520px;
height: 280px;
overflow: hidden;
position: relative;
}
.slider .img-list{
width: 4000px;
}
.slider .img-list li{
float: left;
}
.slider .img-list li img{
width: 520px;
height: 280px;
}
.slider .dots{
position: absolute;
bottom: 20px;
width: 100%;/*父级宽度*/
text-align: center;/*内容居中*/
}
.slider .dots .dot{
width: 10px;
height: 10px;
background-color: #F00;
border-radius: 50%;
margin:0 2px;
-webkit-box-shadow: 1px 2px 10px #000000;
-moz-box-shadow: 1px 2px 10px #000000;
box-shadow: 1px 2px 10px #000000;
display: inline-block;/*转换为内联块级元素*/
*dispaly:inline;
*zoom:1;
/*dipplay:inline-blok不兼容ie6，*内容兼容ie6*/
}
.slider .dots .dot.active{
background-color: #ae0000;
}
.slider .arrow{
display: inline-block;
width: 20px;
height: 40px;
line-height: 40px;
background: rgba(0,0,0,0.5);
position: absolute;
top: 50%;
margin-top: -20px;
text-decoration: none;
color: #ffffff;
text-align: center;
}
.slider .arrow:hover{
background: rgba(0,0,0,0.8);
}
.slider .arrow.right{
position: absolute;
right: 0;
}
</style>
</head>
<body>
<div class="slider">
<ul class="img-list cf">
<li><img src="https://img.alicdn.com/tfs/TB1ILwrQFXXXXXtXFXXXXXXXXXX-520-280.jpg_q90_.webp" alt=""/></li>
<li><img src="https://img.alicdn.com/simba/img/TB1F_ZYQFXXXXcSXpXXSutbFXXX.jpg" alt=""/></li>
<li><img src="https://img.alicdn.com/simba/img/TB1WWZEQFXXXXXoXpXXSutbFXXX.jpg" alt=""/></li>
<li><img src="https://img.alicdn.com/tfs/TB102DLQFXXXXaFXFXXXXXXXXXX-520-280.jpg_q90_.webp" alt=""/></li>
</ul>
<div class="dots">
<a href="#none" class="dot"></a>
<a href="#none" class="dot active"></a>
<a href="#none" class="dot"></a>
<a href="#none" class="dot"></a>
</div>
<a class="arrow" href="#none"><</a>
<a class="arrow right" href="#none">></a>
</div>
</body>
</html>
时间： 2024-11-03 16:13:50