* { margin:0; padding:0; } .container { width:400px; height:300px; margin:30px auto; position:relative; } .container ul li { list-style:none; display:none; } .container ul:first-child { width:100%; height:100%; } .container ul:first-child li { width:100%; height:100%; float:left; position:absolute; top:10px; } .container ul li img { width:100%; height:100%; } .container .current { display:block; } #circle { position:absolute; left:180px; bottom:1px; } #circle li { width:12px; height:12px; background-color:gray; border-radius:50%; margin:0px 4px; display:inline-block; cursor:pointer; } #circle .current1 { background-color:coral; }