* { margin:0; padding:0; } a { text-decoration:none; } li { list-style:none; } #wrap { position:relative; width:700px; height:400px; margin:50px auto; overflow:hidden; } #wrap .pic { position:absolute; top:0; left:0; width:1000%; height:100%; } .pic li { float:left; width:700px; height:400px; color:#fff; font-size:80px; text-align:center; line-height:400px; } .pic li img { border:0; vertical-align:middle; /*width:700px; height:400px; */ } .tab { position:absolute; bottom:20px; left:50%; margin-left:-100px; height:30px; padding-left:10px; background:rgba(0,0,0,.2); border-radius:15px; transition:0.5s; } .tab:hover { background:rgba(0,0,0,.5); transform:scale(1.2); } .tab li { width:20px; height:20px; float:left; background:#fff; border-radius:50%; margin:5px 10px 0 0; /*opacity:0.35; */ cursor:pointer; } .tab li.on { /*position:absolute; top:0; */ background:#f60; /*opacity:1; z-index:99; */ } p { position:absolute; top:50%; margin-top:-30px; width:30px; background:rgba(0,0,0,0.2); text-align:center; font-size:28px; font-weight:bold; line-height:60px; color:#fff; cursor:pointer; } p:hover { background:rgba(0,0,0,0.5); } .prev { left:0; } .next { right:0; }