* { margin:0; padding:0; } html { height:100%; } body { overflow:hidden; height:100%; background:url(img/bg.jpg) no-repeat; background-size:cover; } #albumout { position:absolute; width:762px; height:573px; left:0; top:0; right:0; bottom:0; margin:auto; overflow:hidden; } #albumout span { float:left; } #albumout span img { width:250px; height:187px; padding:2px; } #cover { position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:none; } #prev { width:50px; height:100px; position:absolute; top:50%; left:100px; margin-top:-50px; border-radius:10px; box-shadow:rgb(255,255,255) 0px 0px 30px 10px; color:white; font-size:40px; line-height:100px; text-align:center; cursor:pointer; } #next { width:50px; height:100px; position:absolute; top:50%; right:100px; margin-top:-50px; border-radius:10px; box-shadow:rgb(255,255,255) 0px 0px 30px 10px; color:white; font-size:40px; line-height:100px; text-align:center; cursor:pointer; } #albuminner { display:none; position:relative; margin:10% auto 0; width:500px; height:375px; } #showBox { position:absolute; left:0; top:0; width:500px; height:375px; } #albuminner img { position:absolute; left:0; top:0; width:500px; height:375px; }
假如点击第一张照片,则轮播展示的是有关第一张照片的所有照片,比如:第一张是范冰冰,那么点击展开的都是范冰冰相关的照片