* { margin:0; padding:0; text-decoration:none } body { padding:20px } #container { width:1000px; height:600px; margin:0 auto; overflow:hidden; position:relative; } #list { width:7000px; height:600px; position:absolute; z-index:1 } #list img { float:left; width:1000px; height:600px } #buttons { position:absolute; height:10px; width:140px; z-index:2; bottom:20px; left:440px } #buttons span { cursor:pointer; float:left; width:10px; height:10px; border-radius:50%; background:#666; border:1px solid #fff; margin-left:10px } #buttons .on { background:#fff; } .arrow { cursor:pointer; display:none; line-height:40px; text-align:center; font-size:50px; height:45px; width:40px; position:absolute; z-index:2; top:280px; background:rgba(0,0,0,.1); color:#fff } .arrow:hover { background:rgba(0,0,0,.4) } #container:hover .arrow { display:block } #prev { left:20px } #next { right:20px }