css部分:
*{
margin: 0;
padding: 0;
}
#banner{
width: 800px;
height: 500px;
margin: 30px auto;
position: relative;
overflow: hidden;
}
#box_wrap img{
width: 100%;
height: 500px;
cursor: pointer;
}
.listdian{
width: 150px;
position: absolute;
bottom: 20px;
right: 30px;
display: flex;
justify-content: space-around;
}
.listdian span{
width: 20px;
height: 20px;
border: 1px solid;
text-align: center;
border-radius: 50%;
background: pink;
color: white;
cursor: pointer;
}
.anniu{
position: relative;
cursor: pointer;
}
.anniu span{
font-size: 50px;
color: rgba(250, 150, 195, 0.5);
background: rgba(0, 0, 0, 0.2);
}
.anniu .left{
position: absolute;
right: 95%;
bottom: 230px;
}
.anniu .right{
position: absolute;
left: 95%;
bottom: 230px;
}
.listdian>.active{
background-color: red;
}