1/4
玫瑰#content { width:400px; height:400px; border:10px solid #ccc; text-align:center; margin:40px auto 0; position:relative; background:#f1f1f1; } #content a { width:40px; height:40px; background:#000; border:5px solid #fff; color:#fff; position:absolute; top:175px; text-decoration:none; text-align:center; font-size:30px; font-weight:bold; line-height:30px; opacity:0.6 } #content a:hover { opacity:0.9; cursor:pointer; } #prev { left:10px; } #next { right:10px; } #text { position:absolute; bottom:0; left:0; margin:0 } #span1 { position:absolute; top:0; } #text,#span1 { width:400px; height:30px; color:#fff; background:#000; opacity:0.6; line-height:30px; } #img1 { width:400px; height:400px; } .container { text-align:center; width:450px; height:600px; border:1px solid #ddd; margin:40px auto 0; padding-top:20px; }
利用原生js写图片之间的切换