* { padding:0; margin:0; } .box { width:500px; height:300px; margin:100px auto; position:relative; overflow:hidden; } li { list-style:none; width:100%; height:300px; } img { width:100%; height:100%; vertical-align:top; } .swiper { width:500%; height:300px; position:absolute; left:0; top:0; } .swiper li { width:20%; float:left; } .swiper li img { width:100%; } .dot { position:absolute; display:flex; right:50%; bottom:0; transform:translate(50%,0); margin-bottom:8px; } .dot li { width:15px; height:15px; border-radius:50%; background-color:#fff; margin-right:5px; } .dot .active { background-color:burlywood; } .left,.right { font-family: "宋体"; width:60px; height:60px; background-color:rgba(0,0,0,0.6); position:absolute; top:50%; transform:translate(0,-50%); color:yellowgreen; font-size:50px; text-align:center; line-height:60px; cursor:pointer; } .right { right:0; }
更新时间:2021-04-14 22:37:54