* { margin:0; padding:0; list-style:none; } .banner { width:500px; height:300px; border:3px solid red; margin:100px auto; overflow:hidden; position:relative; } .banner .img { width:3000px; position:absolute; left:0; top:0; } .banner .img li { float:left; } .banner .num { width:100%; position:absolute; bottom:10px; left:0; text-align:center; font-size:0; } .banner .num li { width:10px; height:10px; background:#888; display:inline-block; margin:0 3px; border-radius:50%; cursor:pointer; } .banner .num li.on { background:#f60; } .banner .btn { width:30px; height:50px; background:rgba(0,0,0,0.5); position:absolute; top:50%; margin-top:-25px; color:#fff; font-size:40px; text-align:center; line-height:50px; cursor:pointer; font-family:"宋体"; display:none; } .banner:hover .btn { display:block; } .banner .btn_l { left:0; } .banner .btn_r { right:0; }