* { padding:0; margin:0; } ul { list-style:none; } img { vertical-align:middle; border:none; } .wrap { width:790px; height:340px; margin:0px auto; position:relative; } .wrap .img li { position:absolute; left:0; top:0; display:none; } .wrap .num { position:absolute; left:0; bottom:20px; font-size:0; text-align:center; width:100%; } .wrap .num li { width:20px; height:20px; display:inline-block; background:#666; text-align:center; line-height:20px; color:#fff; border-radius:50%; font-size:16px; margin:0 3px; cursor:pointer; } .wrap .num li.active { background:#a00; } .wrap .btn { position:absolute; top:50%; margin-top:-30px; width:30px; height:60px; background:rgba(0,0,0,.3); color:#fff; text-align:center; line-height:60px; font-size:40px; display:none; cursor:pointer; } .wrap .btn-left { left:0; } .wrap .btn-right { right:0; } .wrap:hover .btn { display:block; }