* { margin:0; padding:0; } a { text-decoration:none; color:#fff; } #content { width:500px; height:300px; overflow:hidden; position:relative; margin:50px auto; } #list { width:3500px; height:300px; position:absolute; z-index:-999; } #list img { float:left; } #buttons { position:absolute; z-index:2; width:150px; left:50%; margin-left:-75px; bottom:20px; } #buttons li { list-style:none; width:20px; height:20px; border-radius:50%; background:#ddd; float:left; margin:0 5px; } #buttons li.on { background:red; } .arrow { position:absolute; width:36px; height:50px; display:none; text-align:center; line-height:50px; background:rgba(0,0,0,0.3); top:50%; margin-top:-25px; } .arrow:hover { background:rgba(0,0,0,0.7); } #content:hover .arrow { display:block; } #prev { left:20px; } #next { right:20px; }
更新时间:2019-09-25 08:51:04