body,html {
margin:0;
padding:0;
}
.container {
width:400px;
padding:20px 0 40px 0;
margin:0 auto;
text-align:center;
position:relative;
}
.carousel-images {
width:300px;
height:200px;
margin:0 auto;
overflow:hidden;
}
.carousel img {
width:100%;
height:100%;
}
.carousel ul {
width:1200px;
height:200px;
list-style:none;
margin:0;
padding:0;
}
.carousel li {
width:300px;
height:200px;
float:left;
}
.press {
display:inline-block;
position:absolute;
top:50%;
z-index:101;
margin-top:-10px;
width:20px;
height:20px;
border-top:5px solid #d7000f;
border-right:5px solid #d7000f;
cursor:pointer;
}
.left {
left:5%;
transform:rotate(-135deg);
}
.right {
right:5%;
transform:rotate(45deg);
}
.circle {
list-style:none;
margin:0;
padding:0;
text-align:center;
overflow:hidden;
position:absolute;
bottom:10px;
left:50%;
transform:translate(-50%);
}
.circle li {
width:10px;
height:10px;
border:1px solid lightcoral;
float:left;
margin-right:10px;
border-radius:50%;
}
.circle-color {
background-color:lightcoral;
}
代码简单,一看就能懂;
pc端和手机端都可以使用;
目前没有添加自动轮播功能。