* { margin:0px; padding:0px; } .banner { width:500px; height:300px; margin:150px auto; position:relative; overflow:hidden; cursor:pointer; } .banner ul { list-style:none; width:700%; height:300px; position:absolute; } .banner ul li { width:500px; height:300px; float:left; } .banner ul li img { width:100%; height:100%; } .banner .arrow .left,.banner .arrow .right { width:40px; height:80px; background:#000000; opacity:0.3; position:absolute; top:50%; transform:translateY(-50%); font-family:"宋体"; font-size:52px; color:#fff; line-height:80px; text-align:center; } .arrow .left { left:0px; } .arrow .right { right:0px; } .banner .arrow { display:none; } /*鼠标经过盒子,让箭头显示出来*/ .banner:hover .arrow { display:block; cursor:pointer; } /*小圆点样式*/ .banner ol { list-style:none; width:200px; height:20px; background:#222222; position:absolute; bottom:50px; left:50%; transform:translateX(-50%); /*opacity:0.3; */ border-radius:10px; } .banner ol li { width:10px; height:10px; background:#fff; border-radius:50%; float:left; margin-left:21px; margin-top:5px; cursor:pointer; } .banner ol .now { background:aqua; }