* { margin:0; padding:0; } .banner { width:580px; height:300px; position:relative; overflow:hidden; margin:50px auto; } .box { height:300px; position:relative; } .box div { width:580px; height:300px; position:absolute; top:0; left:0; opacity:0; transform:1.5s; -moz-transition:1.5s; -webkit-transition:1.5s; } .box div.active { opacity:1; } .box div img { width:100%; height:100%; display:block; } .but div { position:absolute; top:150px; cursor:pointer; padding:5px 15px; font-size:25px; background-color:rgba(102,215,255,0.5); color:white; z-index:2; } .next { right:50px; } .prev { left:50px; } .Dots { position:absolute; bottom:30px; right:50px; } .Dots a { width:10px; height:10px; float:left; display:block; background-color:rgba(102,215,255,0.7); margin-left:8px; border-radius:50%; } .Dots a.active { background-color:white; }