.box{
  margin: 10px auto;
  width:100%;
  height:150px;
  position:relative;
}
.box-img{
  width: 100%;
  height: 150px;
  position:absolute;
  top:0;
  left:0;
  opacity:0;
  transition:all 2.5s;

}
.box-img img{
  width:100%;
  
  object-fit:cover;
  border-radius:10px;
}
.box-img:nth-child(1){
  opacity:1;
}
.box-left{
  position:absolute;
  width:35px;
  height:70px;
  color:#ffffff;
  top:65px;
  border-radius:0 5px 5px 0;
  text-align:center;
  line-height:70px;
  font-size:27px;
}
.box-left:hover{
  background-color:#00000050;
  color:#fff;
}
.box-right{
  position:absolute;
  width:35px;
  height:70px;
  color:#ffffff;
  top:65px;
  border-radius:0 5px 5px 0;
  text-align:center;
  line-height:70px;
  font-size:27px;
  right:0;
}
.box-right:hover{
  background-color:#00000050;
  color:#fff;
}
.box-zhiding>ul{
  transform:translate(-50%,-50%);
  list-style:none;
}
.box-zhiding li{
  width:8px;
  height:8px;
  border-radius:100%;
  background-color:#ccc;
  float:left;
  margin-right:10px;
}
.box-zhiding li:hover{
  background-color:#fff;
}
.box-zhiding li:nth-child(1){
  background-color:#fff;
}
.box-zhiding{
  position:absolute;
  bottom:-20px;
  left:50%;
}